疑似クラス checked

疑似クラス checked は、チェックされたチェックボックスまたは ラジオ を対象とします。

残念ながら、それらの装飾用スタイルを設定することはできません。例えば、背景やボーダーの色を設定することはできません（例えば、幅や高さは設定できますが、期待通りの効果にはなりません）。

それでも、隣接する要素のスタイルを設定することは可能です。例えば、 input:checked + p とすると、チェックされた入力欄の直後に位置する段落にスタイルを設定できます。

構文

要素:checked {
	
}

例

チェックボックスをチェックしてみてください。チェックされたチェックボックスの直後に位置する label タグのラベルが赤色でハイライト表示されるのを確認できます：

<input type="checkbox" id="elem1">
<label for="elem1">ラベル 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">ラベル 2</label>

input:checked + label {
	color: red;
}

例

ラジオ ボタンを選択してみてください。選択されたラジオボタンの直後に位置する label タグのラベルが赤色でハイライト表示されるのを確認できます：

<input type="radio" name="elem" id="elem1">
<label for="elem1">ラベル 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">ラベル 2</label>

input:checked + label {
	color: red;
}