ラジオボタンをカスタマイズしてデザインを変更したい。
デフォルトのラジオボタンは見栄えが悪いだけでなく、｢クリック領域が狭すぎる｣という問題を抱えているため、カスタマイズの要望は多いと思います。
実際に、下記はデフォルトのラジオボタンですが、チェックを入れるには小さな丸をピンポイントでクリックしなければいけません。
PCならともかく、スマホユーザーには使いづらいですね。
See the Pen デフォルトのラジオボタン by たけち (@kwxteqls-the-scripter) on CodePen.
そこでこの記事では、お問い合わせフォーム等で頻繁に使われる｢ラジオボタン｣のカスタマイズ方法を解説します。
なお、WordPressのContact Form 7で作成したラジオボタンのカスタマイズは、下記で解説しています。
ラジオボタンをカスタマイズする手順
ラジオボタンをカスタマイズする際は、次の3つの手順で行います。
- label要素でグルーピングする
- デフォルトのラジオボタンを非表示にする
- CSSでカスタマイズする
順を追って解説します。
ラジオボタンをカスタマイズする方法
ラジオボタンをカスタマイズする方法を解説します。
まずはlabel要素を使って｢クリック領域の問題｣を解決しましょう。
label要素でグルーピングする
ラジオボタンをlabel要素とグルーピング（紐付け）すると、クリック領域が広がります。
下は適切にグルーピングした例ですが、丸の部分だけでなく選択肢の文字列をクリックしてもラジオボタンにチェックが入るのがわかると思います。
See the Pen Untitled by たけち (@kwxteqls-the-scripter) on CodePen.
ラジオボタンとlabel要素を紐付けるには、2つの方法があります。
1つめは、label要素でinput要素を囲む方法です。
<label>
<input type="radio" name="choice" value="dog">いぬ派
</label>
<label>
<input type="radio" name="choice" value="cat">ねこ派
</label>
<label>
<input type="radio" name="choice" value="other">その他
</label>そして、2つめがlabelのfor属性とinputのidを同じにする方法です。
この場合、選択肢のテキストはlabel要素で囲みます。
<input id="dog" type="radio" name="choice" value="dog">
<label for="dog">いぬ派</label>
<input id="cat" type="radio" name="choice" value="cat">
<label for="cat">ねこ派</label>
<input id="other" type="radio" name="choice" value="other">
<label for="other">その他</label>どちらでもOKですが、今回は前者をベースにカスタマイズを進めます。
デフォルトのラジオボタンを非表示にする
ラジオボタンをカスタマイズするにあたり、デフォルトのラジオボタン（丸の部分）を非表示にします。
ポイントは、display: noneで非表示にしないことです。
理由は｢キーボード操作ができなくなってアクセシビリティが低下するから｣で、代わりに次のCSSで非表示にします。
input[type="radio"] {
opacity: 0;
visibility: hidden;
position: absolute;
}すると、下のようにラジオボタンが非表示になります。
CSSでカスタマイズする
前準備ができたので、ここから本格的にCSSを使ってカスタマイズを始めます。
再度、HTML構造を確認しましましょう。
なお、全体をradio-containerクラスを付けたdivで囲いました。
また、選択肢のテキストはspanタグで囲っています。
このような構造にすると、CSSでのスタイリングがしやすいと思います。
<div class="radio-container">
<label>
<input type="radio" name="choice" value="dog">
<span>いぬ派</span>
</label>
<label>
<input type="radio" name="choice" value="cat">
<span>ねこ派</span>
</label>
<label>
<input type="radio" name="choice" value="other">
<span>その他</span>
</label>
</div>ラジオボタンの外側の円を作る
まずは、ラジオボタンの外側の円を作りましょう。
疑似要素（before）を使い、spanの直前に円を挿入します。
なお、円の大きさや色、線の太さなどは、状況に合わせて変更してください。
.radio-container {
display: flex; /*各選択肢を横並びにする*/
gap: 20px; /*各選択肢どうしの間隔*/
}
input[type="radio"] + span {
position: relative;
display: flex; /*円とテキストを横並びにする*/
align-items: center; /*円とテキストを中央揃えにする*/
cursor: pointer;
}
input[type="radio"] + span::before {
display: block;
content: "";
border-radius: 50%;
border: 1px solid #333;
width: 16px;
height: 16px;
margin-right: 10px; /*円とテキストの間隔はここで調節*/
}見た目は下のようになります。
ラジオボタンの内側の円を作る
続いて、ラジオボタンの内側の円を作ります。
疑似要素（after）を使い、外側の円の中心にもうひとつの円を入れます。
こちらも、円の大きさや色などは、状況に合わせて変えてください。
input[type="radio"] + span::after {
display: block;
position: absolute;
content: "";
border-radius: 50%;
width: 8px;
height: 8px;
background-color: #0082b2;
left: 4px;
}ラジオボタンっぽくなってきましたね。
まだクリックしても何も起きないので、最後にラジオボタンとして機能させます。
ラジオボタンを機能させる
ラジオボタンにチェックが入っているときのスタイリングは:checkedという疑似クラスセレクタを使います。
そのため、after疑似要素の1行目を次のように書き換えます。
input[type="radio"]:checked + span::after { /*:checkedを追加する*/
display: block;
position: absolute;
content: "";
border-radius: 50%;
width: 8px;
height: 8px;
background-color: #0082b2;
left: 4px;
}すると、ラジオボタンとして機能するようになります。
余談ですが、ラジオボタンはFontAwesomeを使ってカスタマイズもできます。
ラジオボタンをFontAwesomeでカスタマイズしてみました pic.twitter.com/tKmENC4549
— たけち@Web制作フリーランス (@takechi_web) November 19, 2023
まとめ
今回は、ラジオボタンをカスタマイズする方法を解説しました。
フォームを実装する案件だとほぼ100％カスタマイズが求められるので、いつでも対応できるようこのページをブックマークしておくと便利かと思います。