CSS :focus-visible パシフィク

定義と使用方法

CSS :focus-visible キーボードで焦点を合わせた場合にのみ焦点スタイルを適用する、マウスで焦点を合わせた場合には適用しない、パシフィクを使用できます。

これは :focus 組み合わせて使用すると、キーボード焦点とマウス/タッチ焦点に対して異なる焦点スタイルを作成できます。

例

キーボードのTabキーで焦点を当てたボタンのスタイルを選択および設定します：

button:focus-visible {
  outline: 2px solid red;
}

実際に試してみてください

CSS文法

:focus-visible {
  css宣言;
}

技術的詳細

バージョン： CSS4

ブラウザのサポート

テーブルの数字は、そのパシフィクの完全なサポートを初めて提供するブラウザのバージョンを指定しています。

Chrome Edge Firefox Safari Opera
86 86 85 15.4 72

関連ページ

チュートリアル：CSS 仮類

参照：CSS :focus 仮類