mwSoft blog

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

どうすればいいのか調べたら、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">ボタン１</label>
<input id="bar2" type="radio" name="foo" value="bar2">
<label for="bar2">ボタン２</label>
<input id="bar3" type="radio" name="foo" value="bar3">
<label for="bar3">ボタン３</label>
</div>

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

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