:focus-visibleを使ってみる

フォーカスが当たった際のスタイルを、キーボード操作時とマウス操作時で変えたいときに便利な:focus-visibleを使ってみます。

:focus-visibleについて

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

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

引用 – :focus-visible – CSS: カスケーディングスタイルシート | MDN

:focus-visibleは:focusと同じくフォーカス時のスタイルを設定できる疑似要素ですが、ユーザーの操作がマウスかキーボードかによって適用されるかが変わる点が異なります。

対応ブラウザは主要なブラウザでは特に問題なくサポートされているようです。

サンプルコード

:focusと:focus-visibleを設定したフォームパーツをそれぞれ用意して挙動を確認してみます。

<form>
  <p>focus</p>
  <input type="text" class="focus">
  <select class="focus">
    <option>東京</option>
    <option>大阪</option>
  </select>
  <input type="checkbox" class="focus"> check
  <input type="radio" class="focus"> radio
  <textarea class="focus"></textarea>
  <button class="focus">focusボタン</button>
<hr>
  <p>focus-visible</p>
  <input type="text" class="focus-visible">
  <select class="focus-visible">
    <option>東京</option>
    <option>大阪</option>
  </select>
  <input type="checkbox" class="focus-visible"> check
  <input type="radio" class="focus-visible"> radio
  <textarea class="focus-visible"></textarea>
  <button class="focus-visible">focus-visibleボタン</button>
</form>

.focus:focus {
	outline: orange 3px solid;
}
.focus-visible:focus-visible {
	outline: pink 3px solid;
}

:focusと:focus-visibleのデモページ

キーボード操作(tabキー)の場合、用意した各要素にフォーカスが当たった際にスタイルが適用されました。

マウス操作(クリック)はブラウザによって若干異なり、chromeとedgeの場合、input textとtextarea、selectはフォーカスが当たった際にスタイルが適用されますが、checkboxとradio、buttonに関してはスタイルは適用されませんでした。
Firefoxの場合、input textとtextareaはフォーカスが当たった際にスタイルが適用されますが、checkboxとradio、select、buttonに関してはスタイルは適用されませんでした。
Safariの場合は:focusと:focus-visibleの挙動が同じで、input textとtextarea、selectはフォーカスが当たった際にスタイルが適用されますが、checkboxとradio、buttonに関してはスタイルは適用されませんでした。

Safariのチェックボックスやラジオボタンの挙動に関しては、以前に記事を投稿していますので、詳しくはそちらをご確認ください。

:focus-visibleの使用例としては、ボタンのアウトラインをマウス操作時のみ消したい(キーボード操作時はアクセシビリティ上の理由で残したい)みたいな時に使うとよさそうです。