:focus-visibleフォーカスされ、かつブラウザがフォーカスリングを表示している要素にスタイルを適用する
:focus-visible
擬似クラスは、要素が :focus
擬似クラスに一致している(つまり、閲覧者の操作によって要素がフォーカスされている)状態、かつブラウザが「フォーカスリング」を表示するなど、そのフォーカスを可視化すると判断した状況で、フォーカスされた要素にスタイルを適用します。
:focus-visible
擬似クラスを使用することで、フォーカスインジケータが表示される状況において、その外観だけを変更することができます。
:focus-visibleのサンプルソース
:root { --focus-outline-color: red; } :focus-visible { outline: 1px solid var(--focus-outline-color); }
主要ブラウザの対応
IE11 | × |
---|---|
Edge(EdgeHTML) | × |
Edge(Chromium) | ○ |
Chrome | ○ |
Firefox | ○ |
Safari | ○+15.4 |
iOS Safari | ○+15.4 |
Android Chrome | ○ |