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

サムネイルCSS

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

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

 

スポンサーリンク

コード

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

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>を同じ階層にひらすら並べるだけです。

ポイント

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

 

 

CSS

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

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

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

 

ポイント

  1. ラジオボタンはdisplay: none;
  2. .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>で囲っておくと何かと融通が効きやすいのでオススメです。

 

まとめ

こうしてみると結構簡単そうですが、<input>と<label>を同じ階層に書くことや、<input>→<label>の順番で書くことは意識しないとハマりポイントになります。

焦っている時ほど変なミスでコードが動かないことはよくあるので注意してくださいね。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
CSS
スポンサーリンク
でざなり