Webtech Walker

CSSの:checked擬似クラス

ラジオボタンがチェックされたときにCSSプロパティを指定するための:checked擬似クラスがあります。

実用的な使用方法は下記の例のように、ボタンがチェックされたら、対応するテキストが装飾される。といった感じです。FireFoxとOperaでは動作確認しましたが、IE6、IE7では動きません。

サンプル

隣接セレクタを使って、:checkedの隣のlabelにスタイルを指定しています。ソースはこんな感じ。

<div id="radioBox">
<input type="radio" name="text" value="1" id="radio1" /><label for="radio1">リスト1</label><br />
<input type="radio" name="text" value="2" id="radio2" /><label for="radio2">リスト2</label><br />
<input type="radio" name="text" value="3" id="radio3" /><label for="radio3">リスト3</label><br />
</div>
div#radioBox input:checked + label {
  background:#CCC;
}

javascriptを使わないでCSSだけでここまでやれるのはなかなか感動です。他に:selected、:disabledなどもあるようです。

まだIEなどのブラウザに実装されてないのが残念ですが、ブラウザの対応が進めばかなり使えるテクニックだと思います。

このエントリーをはてなブックマークに追加