CSSのfocus-visibleを使ってみる

ひとりCSS Advent Calendar 2022 25日目です。

focus-visible を使ってみます。

focus-visible とは

• フォームのinput要素にフォーカスを当てるユーザーの行動
  • マウスでクリックする
  • キーボードのタブキーを押す
• このときのスタイルを調整できる

サンプル

要素の隣に結果を書いてある。
挙動はCodepen見てください。

HTML

  <input class="focus" value=":focus"> マウスあり・キーボードあり
</div>
<div>
  <button class="focus">:focus</button> マウスあり・キーボードあり
</div>
<div>
  <input class="focus-visible" value=":focus-visible"> マウスあり・キーボードあり
</div>
<div>
  <button class="focus-visible">:focus-visible</button> マウスなし・キーボードあり
</div>

CSS（抜粋)

:root {
  --color1: #edb658;
  --color2: #e7719b;
}

.focus:focus {
  outline: 4px dotted var(--color1);
}

.focus-visible:focus-visible {
  outline: 4px dotted var(--color2);
}

See the Pen accent-color by Beco (@becolomochi) on CodePen.

感想

• :focus-visible は例えばフォームの送信ボタンで使うと良さそう
  • マウス操作時にはフォーカスは見えなくてもいいけど、キーボードではフォーカスは見えていてほしい場合

参考

• https://developer.mozilla.org/ja/docs/Web/CSS/:focus-visible