CSS3

疑似クラス

:checked

→●、mdn

選択済みなら。

ラジオ ボタンやチェック ボックスは、利用者により 2 つの状態に切り替えられ得る。また、一部のメニュー アイテムは、利用者がそれを選択したとき“チェックされた状態”になる。その種の要素は、“オン”に切り替えられたとき :checked 疑似クラスの対象になる。例えば [HTML5] では、［チェックされている［チェック ボックス／ラジオ ボタン］／選択されている OPTION 要素］が :checked に合致するものと定義されている（参照）。

:checked 疑似クラスは生来的に動的であり、利用者の動作により改められ得るものであるが、文書の中の意味論を与える属性が在ること（[HTML5] の selected 属性や checked 属性など）に基づくものでもあるので、【静的媒体も含む】すべての媒体に適用される。

input[type=checkbox]:not(:checked)

以下のCSSが組み込んであります：

INPUT.Test:checked{
	margin:20px;
}
OPTION.Test:checked{
	background-color:#faa;
}

<INPUT class=Test type=checkbox style="margin:10px;"><BR>
<INPUT class=Test type=checkbox checked style="margin:10px;"><BR>

<SELECT>
 <OPTION class=Test>あ
 <OPTION class=Test>い
 <OPTION class=Test>う
</SELECT>
<BR>

テスト