コンピュータクワガタ

かっぱのかっぱによるコンピュータ関連のサイトです

CSSだけでradioボタンをtoggleボタンのグループのようにする

HTML CSS

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ボタンのまとまりを
f:id:kuwalab:20130826214726p:plain

こんな感じのtoggleのボタンにしたいと思います。
f:id:kuwalab:20130826214730p:plain

以下コードです。

<!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より早く軽快です。