備忘録的プログラミングリファレンス

:focus-visible クラス

 :focus-visible クラスは、フォーカスが可能と判断されたら、スタイル設定を反映する疑似クラスです。

:focus-visible例
input:focus-visible{
	outline: 3px solid yellow;
}
詳しくは Example を参照してください

 フォーカスされる機能をもつ <a> エレメントや <FORM> 部品が対象になります。

  似た疑似クラスに :focus クラス がありますが、マウスによるクリックでのフォーカスと、タブ移動でのフォーカスでは動作に違いがあります。 <a> エレメント、<FORM> 部品によっても違いがあります。
 詳しくは、 Example の後の説明を参照してください。

ページ内 Index

構文(Syntax)

CSS

HTMLElement:focus-visible {
  style_propaty: value;
	...
}

DOM ( JavaScript )

 疑似クラスはDOM ( JavaScript )から操作できません。
 スタイルのみの操作は擬似クラスを利用したほうが簡易です。

Example

 :focus-visible クラスの例です。

 フォーカスされる機能をもつ<a>エレメントや<FORM>部品が対象になります。

 マウスによるクリックでのフォーカスと、タブ移動でのフォーカスでは動作に違いがあります。 <a>エレメント、<FORM>部品によっても違いがあります。

 Google Chromeにおいては以下のようになりました。

 <a>エレメントにおいてのマウスクリックでは、:focusクラスが反映されます。
 タブ移動では、:focusクラス、:focus-visible クラス、どちらか後で定義された方を優先します。

 <input>エレメントにおいてのマウスクリックでは、:focusクラス、:focus-visible クラス、どちらか後で定義された方を優先します。
 タブ移動においても:focusクラス、:focus-visible クラス、どちらか後で定義された方を優先します。