CSSだけでradioボタンをtoggleボタンのグループのようにする
Web画面のデザインをしていると、jQuery UIにあるような
http://jqueryui.com/button/#radio
こんなradioボタンを作りたくなる時があります。
jQuery UIを使ってもいいのですが、個人的には少し動作がもっさりしてしまうように感じるためCSSだけでできないか調べてみました。
http://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label
を参考にしています。
要件としては、こんな感じのradioボタンのまとまりを
こんな感じのtoggleのボタンにしたいと思います。
以下コードです。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ラジオボタンをtoggleのグループっぽくする</title> <style> div { margin-bottom: 20px; } .buttonGroup input[type="radio"] { display: none; } .buttonGroup label { border-top: solid 1px #999999; border-bottom: solid 1px #999999; border-right: solid 1px #999999; background-color: #cccccc; padding: 5px; } .buttonGroup > label:first-of-type { border-left: solid 1px #999999; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .buttonGroup > label:last-of-type { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } .buttonGroup input[type="radio"]:checked + label { background-color: #ffffff; } </style> </head> <body> <div> <input type="radio" name="radio1" value="1" id="radio1-1"><!-- --><label for="radio1-1">なめこ</label><!-- --><input type="radio" name="radio1" value="2" id="radio1-2"><!-- --><label for="radio1-2">しめじ</label><!-- --><input type="radio" name="radio1" value="3" id="radio1-3"><!-- --><label for="radio1-3">まつたけ</label> </div> <div class="buttonGroup"> <input type="radio" name="radio2" value="1" id="radio2-1"><!-- --><label for="radio2-1">なめこ</label><!-- --><input type="radio" name="radio2" value="2" id="radio2-2"><!-- --><label for="radio2-2">しめじ</label><!-- --><input type="radio" name="radio2" value="3" id="radio2-3"><!-- --><label for="radio2-3">まつたけ</label> </div> </body> </html>
radioボタンの:checkedの状態を受け取り、隣接要素(+)のスタイルを変更することで実現しています。残念ながらIE6では動きませんが、IE7からは動きそうな感じです(手元に環境がないので確認してません)。
動作もjQuery UIより早く軽快です。