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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
|
---
title: ':checked'
slug: 'Web/CSS/:checked'
tags:
- ':checked'
- CSS
- Checked
- Layout
- Pseudo-class
- Reference
- Selector
- Toggled
- Web
- button
- checkbox
- radio
translation_of: 'Web/CSS/:checked'
---
<div>{{CSSRef}}</div>
<p><strong><code>:checked</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の<a href="/ja/docs/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>セレクターで、<strong>ラジオボタン</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>)、 <strong>チェックボックス</strong> (<code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>)、 <strong>オプションボタン</strong> ({{HTMLElement("select")}} の中の {{HTMLElement("option")}}) 要素がチェックされていたり <code>on</code> の状態にあったりすることを表します。</p>
<pre class="brush: css no-line-numbers notranslate">/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */
:checked {
margin-left: 25px;
border: 1px solid blue;
}
</pre>
<p>ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。</p>
<div class="note">
<p><strong>メモ:</strong> ブラウザ―は <code><option></code> を<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>として扱うことが多いので、 <code>:checked</code> 擬似クラスでスタイルが適用される部分の大きさはブラウザ―によって異なります。</p>
</div>
<h2 id="Syntax" name="Syntax">構文</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">例</h2>
<h3 id="Basic_example" name="Basic_example">基本的な例</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html notranslate"><div>
<input type="radio" name="my-input" id="yes">
<label for="yes">Yes</label>
<input type="radio" name="my-input" id="no">
<label for="no">No</label>
</div>
<div>
<input type="checkbox" name="my-checkbox" id="opt-in">
<label for="opt-in">Check me!</label>
</div>
<select name="my-select" id="fruit">
<option value="opt1">Apples</option>
<option value="opt2">Grapes</option>
<option value="opt3">Pears</option>
</select>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css notranslate">div,
select {
margin: 8px;
}
/* チェックが入った入力のラベル */
input:checked + label {
color: red;
}
/* チェックが入ったラジオボタン */
input[type="radio"]:checked {
box-shadow: 0 0 0 3px orange;
}
/* チェックが入ったチェックボックス */
input[type="checkbox"]:checked {
box-shadow: 0 0 0 3px hotpink;
}
/* 選択されたオプション */
option:checked {
box-shadow: 0 0 0 3px lime;
color: red;
}
</pre>
<h4 id="Result" name="Result">結果</h4>
<p>{{EmbedLiveSample("Basic_example")}}</p>
<h3 id="Toggling_elements_with_a_hidden_checkbox" name="Toggling_elements_with_a_hidden_checkbox">非表示のチェックボックスの要素を切り替え</h3>
<p>この例では、 <code>:checked</code> 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 <a href="/ja/docs/Web/JavaScript">JavaScript</a> はまったく使っていません。</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html notranslate"><input type="checkbox" id="expand-toggle" />
<table>
<thead>
<tr><th>Column #1</th><th>Column #2</th><th>Column #3</th></tr>
</thead>
<tbody>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr><td>[cell text]</td><td>[cell text]</td><td>[cell text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
<tr class="expandable"><td>[more text]</td><td>[more text]</td><td>[more text]</td></tr>
</tbody>
</table>
<label for="expand-toggle" id="expand-btn">Toggle hidden rows</label>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css notranslate">/* トグルチェックボックスを隠す */
#expand-toggle {
display: none;
}
/* 開く要素は既定で隠す */
.expandable {
visibility: collapse;
background: #ddd;
}
/* ボタンにスタイルを適用 */
#expand-btn {
display: inline-block;
margin-top: 12px;
padding: 5px 11px;
background-color: #ff7;
border: 1px solid;
border-radius: 3px;
}
/* チェックボックスをチェックしたときに隠しコンテンツを表示 */
#expand-toggle:checked ~ * .expandable {
visibility: visible;
}
/* チェックボックスがチェックされていたらボタンにスタイルを適用 */
#expand-toggle:checked ~ #expand-btn {
background-color: #ccc;
}</pre>
<h4 id="Result_2" name="Result_2">結果</h4>
<p>{{EmbedLiveSample("Toggling_elements_with_a_hidden_checkbox", "auto", 220)}}</p>
<h3 id="Image_gallery" name="Image_gallery">画像ギャラリー</h3>
<p><code>:checked</code> 擬似クラスを使って、ユーザーがサムネイルをクリックしたときだけフルサイズの画像が表示される画像ギャラリーを構築できます。実行してみるには<a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">このデモ</a>を参照してください。</p>
<div class="note"><strong>メモ:</strong> 似たような効果で、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> 擬似クラスを使用して隠しラジオボタンを使わないものについては、 <a class="internal" href="/ja/docs/CSS/:hover" title="CSS/:hover">:hover</a> のリファレンスページからの<a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">このデモ</a>を参照してください。</div>
<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-checked', ':checked') }}</td>
<td>{{ Spec2('HTML WHATWG') }}</td>
<td>変更なし。</td>
</tr>
<tr>
<td>{{ SpecName('HTML5 W3C', '#selector-checked', ':checked') }}</td>
<td>{{ Spec2('HTML5 W3C') }}</td>
<td>HTML に関する意味を定義。</td>
</tr>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#checked', ':checked') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>変更なし。</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#checked', ':checked') }}</td>
<td>{{ Spec2('CSS3 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.checked")}}</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>関連する HTML 要素: <code><a href="/ja/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="/ja/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, {{HTMLElement("select")}}, {{HTMLElement("option")}}</li>
<li><a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a></li>
</ul>
</div>
|
