CSSだけでボタン風のラジオボタンを作る方法【クリックで色が変わる】

今回はクリック時に色が変わるボタン風のラジオボタンをCSSだけで作る方法を紹介します。

サンプルはこんな感じ↓（クリックで色が変わります）

ラジオボタン1 ラジオボタン2 ラジオボタン3

コード
コードの解説
1. HTML
2. CSS
ボタンをdivで囲む
まとめ

コード

ともあれまずはコードを見てみましょう。

HTML

<div class="radiobox">
	<input id="radio1" class="radiobutton" name="hoge" type="radio" value="ラジオボタン1" />
	<label for="radio1">ラジオボタン1</label>
	<input id="radio2" class="radiobutton" name="hoge" type="radio" value="ラジオボタン2" />
	<label for="radio2">ラジオボタン2</label> 
	<input id="radio3" class="radiobutton" name="hoge" type="radio" value="ラジオボタン3" />
	<label for="radio3">ラジオボタン3</label>
</div>

CSS

.radiobutton {
  display: none;
}
label {
  background-color: skyblue;
  padding: 10px 20px;
}
.radiobutton:checked + label {
  background-color: pink;
}

コードの解説

HTML

<input>のidと<label>のfor属性を一致させて紐付けましょう。<input>はdisplay: noneにするのできちんと紐付けしておく必要があります。

ただし、<label>の中に<input>を書いて紐付ける方法だとボタン風のラジオボタンは作れないので注意しましょう。

<input>にチェックが入ったら<label>に処理をするので、中に書いてしまうと階層構造の関係でCSSだけでは実装できなくなります（jQueryを使えばできます）

また、<input>→<label>の順番で書かないとチェックが入った時に処理ができないのでこの順番で書くようにしてください。

あとは<input>と<label>を同じ階層にひらすら並べるだけです。

ポイント

<input>のidと<label>のfor属性で紐付け
<input>と<label>は同じ階層に、<input>→<label>の順番で書く

CSS

ラジオボタン本体はdisplay: none;で非表示にします。

<label>に背景色を入れておくとクリックした時の変化がわかりやすいと思います。

.radiobutton:checked + labelはいわゆる隣接セレクタですね。.radiobuttonがチェックされた時の隣にあるlabelにスタイルを当てます。

ポイント

ラジオボタンはdisplay: none;
.radiobutton:checked + label でラジオボタンにチェックが入ったらスタイルを指定

ボタンをdivで囲む

ここからは好みによりますが、<input>と<label>をただ並べるだけだとバラバラしているので、<div>で囲ってあげるとまとまりのあるコードになります。

<div class="radiobox">
	<div class="radiobutton">
		<input id="radio1" class="radiobutton" name="hoge" type="radio" value="ラジオボタン1" />
		<label for="radio1">ラジオボタン1</label>
	</div>
	<div class="radiobutton">
		<input id="radio1" class="radiobutton" name="hoge" type="radio" value="ラジオボタン1" />
		<label for="radio1">ラジオボタン2</label>
	</div>
</div>

<div>で囲っておくと何かと融通が効きやすいのでオススメです。