:focus-visible 疑似クラスは、要素が :focus 疑似クラスに一致している時で、ユーザーエージェントが要素にフォーカスを明示するべきであると発見的に指定した場合 (多くのブラウザーではこの場合、「フォーカスリング」を表示します) に適用されます。

このセレクターは、ユーザーの入力方法 (マウスなのかキーボードなのか) によって異なるフォーカス表示を提供したい場合に便利です。

なお、 Firefox は似た機能をより古い接頭辞付きの疑似クラス、 :-moz-focusring で対応しています。詳しくは :-moz-focusring ページを参照してください。

構文

:focus-visible

基本的な例

この例では、 :focus-visible セレクターはユーザーエージェントの動作を使用して一致するタイミングを判断します。マウスでそれぞれのコントロールをクリックしたときと、キーボードを使用してタブ移動したときとで、何が起こるかを比較してみてください。なお、 :focus でスタイル付けされた要素との動作の違いに注意してください。

<input value="Default styles"><br>
<button>Default styles</button><br>
<input class="focus-only" value=":focus only"><br>
<button class="focus-only">:focus only</button><br>
<input class="focus-visible-only" value=":focus-visible only"><br>
<button class="focus-visible-only">:focus-visible only</button>
input, button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;  
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}

フォーカスインジケーターの選択的な表示

カスタムコントロール、例えば カスタム要素ボタンなどは、 :focus-visible を使用してキーボードフォーカスに対してのみフォーカスインジケーターを選択的に適用することができます。これは <button> のようなコントロールのネイティブのフォーカスの動作に一致します。

<custom-button tabindex="0" role="button">Click Me</custom-button>
custom-button {
  display: inline-block;
  margin: 10px;
}

custom-button:focus {
  /* Provide a fallback style for browsers
     that don't support :focus-visible */
  outline: none;
  background: lightgrey;
}

custom-button:focus:not(:focus-visible) {
  /* Remove the focus indicator on mouse-focus for browsers
     that do support :focus-visible */
  background: transparent;
}

custom-button:focus-visible {
  /* Draw a very noticeable focus style for
     keyboard-focus on browsers that do support
     :focus-visible */
  outline: 4px dashed darkorange;
  background: transparent;
}

ポリフィル

focus-visible.js を使用して :focus-visible のポリフィルにすることができます。

仕様書

仕様書 状態 備考
Selectors Level 4
:focus-visible の定義
草案 初回定義

ブラウザーの対応

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応671 なし なし なし なし なし
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし671 なし なし なし なし なし

1. From version 67: this feature is behind the #enable-experimental-web-platform-features runtime flag (needs to be set to enabled).

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09
最終更新者: mfuji09,