--- title: ':-moz-focusring' slug: 'Web/CSS/:-moz-focusring' tags: - CSS - 'CSS:Mozilla Extensions' - Non-standard - Pseudo-class - Reference - Selector translation_of: 'Web/CSS/:-moz-focusring' ---
{{Non-standard_header}}{{CSSRef}}

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

重要: このセレクターは CSS Selectors 4 仕様で {{cssxref(":focus-visible")}} に改名されました。

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

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

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

構文

:-moz-focusring

例

HTML

<input />

CSS

input {
  margin: 5px;
}

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

結果

{{EmbedLiveSample('Example')}}

仕様書

どの仕様にも含まれていません。

ブラウザーの互換性

{{Compat("css.selectors.-moz-focusring")}}

関連情報