files/ja/web/css/_colon_-moz-focusring/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

---
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'
---
<div>{{Non-standard_header}}{{CSSRef}}</div>

<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>:-moz-focusring</code></strong> <a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>は、 {{cssxref(":focus")}} 擬似クラスに似た <a href="/ja/docs/Web/CSS/Mozilla_Extensions">Mozilla 拡張</a>ですが、現在フォーカスが当たっていて、<em>かつ</em>フォーカスリングやその他のインジケーターがその周りに描かれる場合のみ一致します。</p>

<div class="blockIndicator note">
<p><strong>重要</strong>: このセレクターは CSS Selectors 4 仕様で {{cssxref(":focus-visible")}} に改名されました。</p>
</div>

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

<p>作業グループは以前、<a href="https://lists.w3.org/Archives/Public/www-style/2015Oct/0012.html">この機能を CSS Selectors 4 または 5 で</a> <code>:focus-ring</code> として追加する意向を持っており、<a href="https://lists.w3.org/Archives/Public/www-style/2017Dec/0018.html">改名が決定され</a> {{cssxref(":focus-visible")}} となり、 CSS Selectors 4 に追加されました。</p>

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

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="syntaxbox notranslate">:-moz-focusring</pre>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;input /&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css notranslate">input {
  margin: 5px;
}

:-moz-focusring {
  color: red;
  outline: 2px dotted green;
}
</pre>

<h3 id="Result" name="Result">結果</h3>

<p>{{EmbedLiveSample('Example')}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<p>どの仕様にも含まれていません。</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("css.selectors.-moz-focusring")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>{{cssxref(":focus-visible")}}</li>
 <li>{{bug("418521")}}</li>
</ul>