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

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

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

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

構文

:-moz-focusring

HTML

<input />

CSS

input {
  margin: 5px;
}

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

結果

仕様書

この機能はまだどの仕様書にも定義されていませんが、作業グループで議論されSelectors 4 又は 5 に追加されることが決まっています

ブラウザーの対応

No compatibility data found. Please contribute data for "css.selectors.-moz-focusring" (depth: 1) to the MDN compatibility data repository.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mdnwebdocs-bot, mfuji09, teoli
最終更新者: mdnwebdocs-bot,