:checked
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
:checked は CSS の擬似クラスセレクターで、ラジオボタン (<input type="radio">)、 チェックボックス (<input type="checkbox">)、 オプションボタン (<select> の中の <option>) 要素がチェックされていたり on の状態にあったりすることを表します。
css
/* すべての選択中のラジオボタン、チェックボックス、オプションボタン */
:checked {
margin-left: 25px;
border: 1px solid blue;
}
試してみましょう
label,
input[type="submit"] {
display: block;
margin-top: 1em;
}
input:checked {
border: none;
outline: 2px solid deeppink;
}
<form>
<p>How did you find out about us?</p>
<label
><input name="origin" type="radio" value="google" checked /> Google</label
>
<label><input name="origin" type="radio" value="facebook" /> Facebook</label>
<p>Please agree to our terms:</p>
<label
><input name="newsletter" type="checkbox" checked /> I want to subscribe to
a personalized newsletter.</label
>
<label
><input name="privacy" type="checkbox" /> I have read and I agree to the
Privacy Policy.</label
>
<input type="submit" value="Submit form" />
</form>
ユーザーは要素をチェック/選択することでこの状態にすることができ、要素のチェックや選択を外すとこの状態から外れます。
メモ:
ブラウザーは <option> を置換要素として扱うことが多いので、 :checked 擬似クラスでスタイルが適用される部分の大きさはブラウザーによって異なります。
構文
:checked
例
基本的な例
HTML
html
<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>
CSS
css
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;
}
結果
非表示のチェックボックスの要素を切り替え
この例では、 :checked 擬似クラスを利用して、ユーザーにチェックボックスの状態に基づいたコンテンツの切り替えができるようにします。 JavaScript はまったく使っていません。
HTML
html
<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>
CSS
css
/* トグルチェックボックスを隠す */
#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;
}