- このトピックには5件の返信、2人の参加者があり、最後に
により1年、 6ヶ月前に更新されました。
6件の投稿を表示中 - 1 - 6件目 (全6件中)
-
投稿
-
【Snow Monkey のバージョン】20.0.1
【Snow Monkey Blocks のバージョン】19.1.0
【ブラウザ】Chrome### 実現したかったこと
Snow Monkey Blocks の「パネル」ブロックのフォーカスを可視化したい### 試したこと
CSSで次のように書くとアウトラインが表示されました。.smb-panels__item a:focus::after { outline: solid; }.smb-panels__itemは div要素なのでそのままではフォーカスが当たらない.smb-panels__item内の a要素は高さ・幅が0なのでフォーカスが当たっても見えないa::afterにフォーカスリングを表示させた
フォーカスリングではなく、:hover とスタイルを合わせたい場合は
outline〜 を box-shadow〜 に書き換えると良いかと思います。Who liked:
あ！こちらはパネルブロックの「リンク設定」で「リンクを表示：OFF」にしている場合のものでした。
「リンクを表示：ON」にしてリンクテキストを記入した場合は、ちゃんとフォーカスが表示されます。疑似要素になっている影響か、項目ブロックのバナースタイルでもフォーカスリングが見えない状況のようです。
パネル・バナーともお気に入りのブロックなので、ご確認いただけるとうれしいです！Who liked:
デフォルトの見た目に合わせたい + 設定によって内側にずらさないとフォーカスリングが途切れてしまうときがある、ので、デフォルトは下記の CSS でいきたいと思います！
.smb-panels__item__action > a:focus:after { outline: 1px auto -webkit-focus-ring-color; outline-offset: -2px; }項目ブロックのほうも確認します！
Who liked:
6件の投稿を表示中 - 1 - 6件目 (全6件中)
- トピック「Snow Monkey Blocks「パネル」ブロックのフォーカスを可視化する」には新しい返信をつけることはできません。