CSSの擬似クラス:checkedを実際に使ってみる
- 2007年06月20日
- category:XHTML/CSS
- Comment(0)
- Trackback(0)
:hoverや:visitedと同じように、ラジオボタンがチェックされたときに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などのブラウザに実装されてないのが残念ですが、ブラウザの対応が進めばかなり使えるテクニックだと思います。
- Prev Entry
- ブログエントリーをTwitterにポストするTwitBackerを試してみた
- Next Entry
- jQueryのプラグイン、jQuery_Autoで画像のロールオーバー
トラックバックURL
http://webtech-walker.com/archive/2007/06/20202718.html/trackback
※トラックバックを受け付けてから表示するまでにしばらく時間がかかる場合があります。
