2015年03月19日

CSSだけでボタン風のラジオボタン

こう普通のボタンなんだけど色で選択できるのが出したかった。

どうすればいいのか調べたら、radioのdisplayをnoneにして、checkedの時にスタイル変えればCSSのみでいけるらしい。

.button-radio input[type="radio"] {
  display:none; 
}

.button-radio label {
  display:inline-block;
  color:#fff;
  background-color:#2780e3;
  padding:5px 10px;
}

.button-radio input[type="radio"]:checked + label { 
  background-color:#000;
}
<div class="button-radio">
<input id="bar1" type="radio" name="foo" value="bar1" checked>
<label for="bar1">ボタン1</label>
<input id="bar2" type="radio" name="foo" value="bar2">
<label for="bar2">ボタン2</label>
<input id="bar3" type="radio" name="foo" value="bar3">
<label for="bar3">ボタン3</label>
</div>

大半のブラウザはこの辺のスタイルにも対応するようになったので、ちょっとしたデザインを書くのがとても楽になってきた。

数年前には考えられなかったことだ。ありがたや。