最新のブラウザでのキーボードのみのフォーカス スタイル

最新のブラウザでは、:focus-visible 疑似クラスを利用してキーボードを実現できます。フォーカススタイルのみ。この疑似クラスは、ユーザーがキーボードまたはその他の非ポインティング デバイスを介してページを操作するときにフォーカスされた要素と一致し、ユーザーを支援するときにフォーカスを示します。その結果、ユーザーがクリックまたはタップして操作するとき、フォーカス リングは抑制されます。

:focus-visible を使用したカスタム フォーカス スタイル

維持しながらカスタム フォーカス スタイルを実装するには古いブラウザとの互換性を維持するには、次のアプローチに従ってください:

button:focus {
  /* Default focus styles */
}

button:focus:not(:focus-visible) {
  /* Undo default focus styles */
}

:focus-visible をサポートするブラウザでは、:focus-visible が非アクティブな場合、2 番目のルールは最初のルールで定義されたフォーカス スタイルをオーバーライドします。これにより、:focus-visible がアクティブな場合にのみフォーカス スタイルが適用されるようになります。

古いブラウザ向けのオリジナル ソリューション

:focus-visible をサポートしていないブラウザの場合、別のアプローチとしては、ローマン コマロフの記事で提案されているように、各フォーカス可能な要素内で追加要素を使用することが含まれます:

/* Root button styling */
.btn {
  all: initial;
  display: inline-block;
}

/* Inner content element */
.btn__content {
  background: orange;
  cursor: pointer;
  display: inline-block;
}

/* Custom focus styles on inner element */
.btn:focus > .btn__content {
  box-shadow: 0 0 2px 2px #51a7e8;
  color: lime;
}

カスタム フォーカス スタイルを追加した後に親要素と内部要素の両方のデフォルトのアウトラインを削除しながら、内部要素にフォーカス スタイルを配置すると、キーボード インタラクションのみが主要な表示要素にフォーカス スタイルを適用します。