どうすればいいのか調べたら、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>
大半のブラウザはこの辺のスタイルにも対応するようになったので、ちょっとしたデザインを書くのがとても楽になってきた。
数年前には考えられなかったことだ。ありがたや。