目次
フォームの選択肢としてよく使用されるラジオボタンは、デフォルトのデザインではシンプルすぎる場合があります。CSSを活用してラジオボタンをカスタマイズすることで、視覚的に魅力的で使いやすいUIを提供できます。ここでは、2種類のラジオボタンカスタマイズ方法を紹介します。
ラジオボタンをボタン風にカスタマイズ
デザイン概要
見た目をボタンに近づけたラジオボタンのデザインです。選択状態になると背景色が変わり、ホバー時にはボーダーの色が変化します。これにより、ユーザーに視覚的なフィードバックを提供します。
HTML構造
<ul class="radio-a">
<li>
<input name="radio-a" id="is-option-a" type="radio" value="オプションA">
<label for="is-option-a">オプションA</label>
</li>
<li>
<input name="radio-a" id="is-option-b" type="radio" value="オプションB">
<label for="is-option-b">オプションB</label>
</li>
</ul>CSSスタイル
.radio-a{
display: flex;
justify-content: center;
margin-block: 50px;
gap: 10px;
}
.radio-a input[type="radio"]{
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
.radio-a label{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 12px;
background-color: #ddd;
border: 3px solid #ddd;
color: #fff;
aspect-ratio: 1 / 1;
width: 80px;
cursor: pointer;
transition: .3s;
}
.radio-a input[type="radio"]:checked + label{
background-color: #f9920c;
border-color: #f9920c;
cursor: default;
}
@media (hover: hover){
.radio-a li:hover label{
border-color: #f9920c;
}
}解説
- ラジオボタンの非表示:
input[type="radio"]を画面から見えなくすることで、デフォルトのスタイルを隠します。 - ラベルのボタン風デザイン: ラベルがボタンのように見えるように、背景色、ボーダー、サイズを設定。
- 選択状態のスタイル: チェックされた状態のラベルに異なる背景色とボーダー色を適用。
- ホバー効果: マウスホバー時にラベルのボーダー色が変わるように設定。
ラジオボタンをチェックマーク付きにカスタマイズ
デザイン概要
ラジオボタンの選択肢にチェックマーク風のビジュアルを追加したデザインです。選択状態になると丸いチェックマークが表示され、ホバー時にはその表示が変化します。
HTML構造
<ul class="radio-b">
<li>
<input name="radio-b" id="is-option-a" type="radio" value="オプションA">
<label for="is-option-a">オプションA</label>
</li>
<li>
<input name="radio-b" id="is-option-b" type="radio" value="オプションB">
<label for="is-option-b">オプションB</label>
</li>
</ul>CSSスタイル
.radio-b{
display: flex;
justify-content: center;
margin-block: 50px;
gap: 20px;
}
.radio-b input[type="radio"]{
position: absolute;
white-space: nowrap;
border: 0;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
}
.radio-b label{
position: relative;
padding-left: 30px;
cursor: pointer;
}
.radio-b label::before,
.radio-b label::after{
content: "";
display: inline-block;
aspect-ratio: 1 / 1;
width: 20px;
border-radius: 50%;
position: absolute;
left: 0;
top: 50%;
transition: .1s;
}
.radio-b label::before{
transform: translateY(-50%);
border: 2px solid #ddd;
}
.radio-b label::after{
transform: translateY(-50%) scale(0);
background-color: #77ee01;
border: 2px solid #77ee01;
}
.radio-b input[type="radio"]:checked + label::before{
border-color: #77ee01;
}
.radio-b input[type="radio"]:checked + label::after{
transform: translateY(-50%) scale(0.5);
opacity: 1;
}
@media (hover: hover){
.radio-b label:hover::after{
transform: translateY(-50%) scale(0.5);
opacity: 0.5;
}
}解説
- ラジオボタンの非表示:
.radio-b input[type="radio"]でラジオボタンを非表示にします。 - ラベルのチェックマーク追加: 擬似要素
::beforeと::afterを使用して、カスタムの丸いチェックボックスを作成。::beforeは外側の円を表し、未選択時のボーダーを描く。::afterは内部のチェックマークとして動作し、チェックされたときに表示されます。
- 選択状態のスタイル: チェックされた状態でボーダー色と内部のチェックマークの変化を適用。
- ホバー効果: ホバー時に内部のチェックマークが半透明で表示され、ユーザーに視覚的なフィードバックを提供。
チェックボックスについて
チェックボックスも上記のCSSが同様に使えます。
HTMLとCSSの該当箇所
<input name="radio-b" id="is-option-a" type="radio" value="オプションA">.class input[type="radio"]{
/* CSS */
}を
<input name="radio-b" id="is-option-a" type="checkbox" value="オプションA">.class input[type="checkbox"]{
/* CSS */
}に変えるだけでいけます。
まとめ
この記事では、CSSを使用してラジオボタンをカスタマイズする2つの方法を紹介しました。
これらのコードは、そのままコピーして使用できます。必要に応じて色やサイズを変更し、あなたのウェブサイトのデザインに合わせてカスタマイズしてください。また、アクセシビリティを考慮し、適切なラベルや説明を追加することも重要です。
番外編
チェックボックスを一つしか選べないようにする方法
$('.checkboxChageToRadio').each(function () {
$(this).find('input[type="checkbox"]').on('change', function () {
if (this.checked) {
$(this).closest('.checkboxChageToRadio')
.find('input[type="checkbox"]')
.not(this)
.prop('checked', false);
}
});
});