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

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 に追加されることが決まっています

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応
非標準
Chrome ? Edge ? Firefox 完全対応 4IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。

関連情報

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

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