:-moz-focusring

非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。

:-moz-focusring は CSS の擬似クラスで、 Mozilla 拡張であり、 :focus 擬似クラスに似ていますが、現在フォーカスが当たっていて、かつフォーカスリングやその他のインジケーターがその周りに描かれる場合のみ一致します。

メモ: このセレクターは CSS Selectors 4 仕様で :focus-visible に改名されました。

:-moz-focusring に一致すると :focus にも一致しますが、逆は常に成り立つとは限りません。ユーザーエージェントがフォーカスリングの描画を有効にしているかどうか、どのようにして要素にフォーカスが当たったかによります。ユーザーエージェントがフォーカスリングの描画を有効にしているかどうかは、オペレーティングシステムの設定やその他の要因によりますので、この擬似クラスの詳細な動きはプラットフォームごとに異なります。

作業グループは以前、この機能を CSS Selectors 4 または 5 で :focus-ring として追加する意向を持っており、改名が決定され :focus-visible となり、 CSS Selectors 4 に追加されました。

メモ: 開発者は :-moz-focusring を、 focus 状態がユーザーによるマウスのクリックとキーボードのタブ移動のどちらで行なわれたのかを区別するために使う傾向があります。これはカスタム要素を作成し、振る舞いに応じてスタイルを変更したい場合にも便利かもしれません。

構文

:-moz-focusring

例

HTML

<input />

CSS

input {
  margin: 5px;
}

:-moz-focusring {
  color: red;
  outline: 2px dotted green;
}

:-moz-focusring

構文

例

HTML

CSS

結果

仕様書

ブラウザーの互換性

関連情報