疑似クラス checked

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

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

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

構文

css要素:checked {
  
}

例

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

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

cssinput:checked + label {
  color: red;
}

Результат:

例

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

html<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>

cssinput:checked + label {
  color: red;
}

Результат: