blob: 5e4d19f79dbacc9a8b250f2d5e7d5cb93936df2d (
plain)
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
---
title: ':indeterminate'
slug: 'Web/CSS/:indeterminate'
tags:
- ':indeterminate'
- CSS
- Layout
- Pseudo-class
- Reference
- Selector
- Web
- checkbox
- progress
- radio button
translation_of: 'Web/CSS/:indeterminate'
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>:indeterminate</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/Web/CSS/Pseudo-classes">擬似クラス</a>セレクターで、未確定の状態にあるフォーム要素を表します。例えばチェックボックスで HTML の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性が <code>true</code> に設定されたもの、ラジオボタンでグループ内がすべて選択されていないもの、 {{HTMLElement("progress")}} 要素で中間の状態などです。</span></p>
<pre class="brush: css no-line-numbers notranslate">/* 中間の状態にある <input> をすべて選択 */
input:indeterminate {
background: lime;
}</pre>
<p>このセレクターが対象とする要素は以下の通りです。</p>
<ul>
<li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> 要素で、<a href="/ja/docs/Web/JavaScript">JavaScript</a> によって <code>indeterminate</code> プロパティが <code>true</code> に設定されている場合</li>
<li><code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code> 要素で、フォーム内の同じ <code>name</code> の値を持つすべてのラジオボタンが未選択である場合</li>
<li>{{HTMLElement("progress")}} 要素で、中間の状態の場合</li>
</ul>
<h2 id="Syntax" name="Syntax">構文</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Checkbox_radio_button" name="Checkbox_radio_button">チェックボックスとラジオボタン</h3>
<p>この例では中間の状態にあるフォームの要素に特殊なスタイルを適用します。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div>
<input type="checkbox" id="checkbox">
<label for="checkbox">背景が緑色になるはずです</label>
</div>
<div>
<input type="radio" id="radio">
<label for="radio">背景が緑色になるはずです</label>
</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css; hightlight[5] notranslate">input:indeterminate + label {
background: lime;
}
</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js notranslate">var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
inputs[i].indeterminate = true;
}
</pre>
<p>{{EmbedLiveSample('Checkbox_radio_button', 'auto', 50)}}</p>
<h3 id="Progress_bar" name="Progress_bar">プログレスバー</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><progress>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css; hightlight[5] notranslate">progress {
margin: 4px;
}
progress:indeterminate {
opacity: 0.5;
background-color: lightgray;
box-shadow: 0 0 2px 1px red;
}
</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample('Progress_bar', 'auto', 30)}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', '#selector-indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td>変更なし。</td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', '#selector-indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td>HTML における意味論と制約検証の定義。</td>
</tr>
<tr>
<td>{{SpecName('CSS4 Selectors', '#indeterminate', ':indeterminate')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>変更なし。</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("css.selectors.indeterminate")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Learn/Forms">ウェブフォーム — ユーザーデータでの作業</a></li>
<li><a href="/ja/docs/Learn/Forms/Styling_web_forms">ウェブフォームの整形</a></li>
<li><code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code> 要素の <code><a href="/ja/docs/Web/HTML/Element/input/checkbox#indeterminate">indeterminate</a></code> 属性</li>
<li>{{HTMLElement("input")}} およびそれを実装している {{domxref("HTMLInputElement")}} インターフェイス</li>
<li>{{cssxref(":checked")}} セレクターは、チェックボックスがチェックされているかどうかでスタイル付けすることができます</li>
</ul>
</div>
|
