【簡単】radioボタン（ラジオボタン）のデザインをカスタマイズする方法【CSS】
ブラウザによってradioボタンの見た目が変わる。
共通のデザインになるようカスタマイズしたい。
この様な悩みを解決します。
本記事ではCSSを使って、独自デザインのradioボタンを作成する方法について解説します。
radioボタンをリセットする
input[type="checkbox"] {
margin: 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
まず最初にradioボタンのデフォルトデザインを無効にします。
上記CSSを当てることで、リセットされます。
radioボタン用HTMLを用意
<input id="radio01" name="radio" class="form-input-radio" type="radio">
<label for="radio01">ラジオ01</label>
<input id="radio02" name="radio" class="form-input-radio" type="radio">
<label for="radio02">ラジオ02</label>
<input id="radio03" name="radio" class="form-input-radio" type="radio">
<label for="radio03">ラジオ03</label>
radioボタン用のHTMLです。
本記事では上記コードを使ってCSSでデザインしていきます。
radioボタンデザイン サンプル
See the Pen
ラジオボタン デザイン by Kohei (@kouk05)
on CodePen.0
radioボタンデザインサンプルです。
一般的なradioボタンの仕様をリセットされた状態から独自のCSSで作ってます。
導入方法は以下の通りです。
radioボタン用独自デザインCSS
input[type="radio"] {
width: 20px;/*radioボタンの横幅*/
height: 20px;/*radioボタンの縦幅*/
border-radius: 100px;
position: relative;
vertical-align: sub;
margin-right: 5px;
}
input[type="radio"]::before, input[type="radio"]::after{
content: "";
display: block;
border-radius: 50%;
position: absolute;
transform: translateY(-50%);
top: 50%;
}
input[type="radio"]::before {
background-color: #fff;
border: 1px solid #c2c1c1;
height: 20px;/*radioボタンの横幅*/
width: 20px;/*radioボタンの縦幅*/
left: 0px;
}
input[type="radio"]::after {
background-color: #c2c1c1;
opacity: 0;/*チェックされてないradioボタンは非表示*/
height: 14px;/*radioボタンチェック時の中点の高さ*/
width: 14px;/*radioボタンチェック時の中点の横幅*/
left: 4px;/*radioボタンチェック時の中点の位置*/
}
input[type="radio"]:checked::after {
opacity: 1;/*チェックされたradioボタンは表示*/
}
先ほどのradioボタンサンプルで使ってるCSSになります。
radioボタンを作るのに擬似要素のbefore要素・after要素を採用してます。
擬似要素のbefore要素でradioボタンの外枠、after要素でradioボタンがチェックされたときの中点を作成します。
それぞれwidth・height・positionを任意の値に設定し、radioボタンの位置・形状を調整します。
opacityを使ってチェック前・チェック後に透過率を設定し、radioボタンがチェックされたときの表示・非表示を設定します。
以上で独自デザインで簡単なradioボタンの完成です。
まとめ
お問い合わせフォームなどでradioボタンを扱うサイトが多々あるかと思います。
本記事を参考に独自のデザインを当ててみましょう。
以上で解説を終わります。
目次