UI要素状態擬似クラス (E:checked)
CSS3で定義された、UI要素状態擬似クラスのパターンE:checked
は、ラジオボタンやチェックボックスがチェックされた時に適用されるセレクタです。
- 対応ブラウザ
-
UI要素状態擬似クラスのサンプル
input[type="checkbox"] {
margin-right: 5px;
}
input[type="checkbox"]:checked {
margin-right: 10px;
}
<p>
<input type="checkbox" id="checkboxExample" name="hoge" value="1" />
<label for="checkboxExample"> チェックボックス</label>
</p>
チェックボックスにスタイルを指定しても殆ど適用されないので、こんなんですみません。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
チェックを付けると、5pxテキストが動くのが確認できます。
実用的に使う場合、:checked
も、JSなどと組み合わせて使う感じになると思われます。