デザイン
2021.09.11
CSSだけでボタン風のラジオボタンを作る方法
今回はボタン風のラジオボタンをCSSだけで作る方法を紹介します。
コード
コードはこんな感じです
<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>.radiobutton {
display: none;
}
label {
background-color: skyblue;
padding: 10px 20px;
}
.radiobutton:checked + label {
background-color: pink;
}コードの解説
<input>のidと<label>のfor属性を一致させて紐付けましょう。<input>はdisplay: noneにするのできちんと紐付けしておく必要があります。
ただし、<label>の中に<input>を書いて紐付ける方法だとボタン風のラジオボタンは作れないので注意しましょう。
<input>にチェックが入ったら<label>に処理をするので、中に書いてしまうと階層構造の関係でCSSだけでは実装できなくなります
また、<input>→<label>の順番で書かないとチェックが入った時に処理ができないのでこの順番で書くようにしてください。
あとは<input>と<label>を同じ階層にひらすら並べるだけです。
ラジオボタン本体はdisplay: none;で非表示にします。
<label>に背景色を入れておくとクリックした時の変化がわかりやすいと思います。
.radiobutton:checked + labelはいわゆる隣接セレクタですね。.radiobuttonがチェックされた時の隣にある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>の順番で書くことは意識しないとハマりポイントになります。
焦っている時ほど変なミスでコードが動かないことはよくあるので注意してくださいね。
この記事に関連するタグ
正しい効果測定は、正しい計測設定から！Googleアナリティクス設定項目チェックシート（無料）
Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。
リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください
株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。
