・ラジオボタンをカスタマイズしたいけどどうするの？
こんな疑問にお答えします。
お問い合わせフォームなどで使うラジオボタンですが、デフォルトでは下記のようになっていますよね。
ただ案件によっては、このラジオボタンを変更したい場合があります。
どうやってカスタマイズするんだ？と思うはず。
ただ以外とCSSのみで実装可能です。
すぐにできるよ！
ということで、この記事では「ラジオボタンのカスタマイズ方法」について解説していきます！
・ラジオボタンのカスタマイズ方法
・ラジオボタンのカスタマイズ方法【画像利用編】
目次
【CSS】ラジオボタンのカスタマイズ方法【コピペOK】
カスタマイズしたラジオボタンのサンプルがこちらになります。
See the Pen ➀ラジオボタンのカスタマイズ by jito-coder (@jito-coder) on CodePen.
クリックしたらグレー色のラジオボタンが表示されますよね。
<div class="container">
<label class="radio">
<input class="radio__btn" type="radio" name="fruit" value="みかん" checked="checked">
<span class="radio__text">みかん</span>
</label>
<label class="radio">
<input class="radio__btn" type="radio" name="fruit" value="りんご">
<span class="radio__text">りんご</span>
</label>
<label class="radio">
<input class="radio__btn" type="radio" name="fruit" value="ぶどう">
<span class="radio__text">ぶどう</span>
</label>
</div>.radio__btn {
appearance: none;
}
.radio__text {
padding-left: 30px;
position: relative;
cursor: pointer;
}
.radio__text::before {
content: '';
display: block;
border-radius: 50%;
background-color: #000066;
width: 25px;
height: 25px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.radio__btn:checked +.radio__text::after {
content: '';
display: block;
border-radius: 50%;
width: 13px;
height: 13px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 6px;
transform: translateY(-50%);
}カスタマイズする手順としてはこちら↓
- labelタグでinputタグとspanタグを囲む
- デフォルトのラジオボタンを非表示に
- spanタグのbeforeでラジオボタン大枠作成
- クリックしたらafterの丸ボタンを表示
順に見ていきましょう！
（※このカスタマイズ方法はあくまで一例です）
まずHTMLの組み立てですが、inputタグとspanタグをlabelタグで囲むように作成します。
<label class="radio">
<input class="radio__btn" type="radio" name="fruit" value="みかん" checked="checked">
<span class="radio__text">みかん</span>
</label>これでspanタグをクリックしても、ラジオボタンタイプのinputタグが反応するようになりました。
次に元々あるデフォルトのラジオボタンを非表示にしましょう。
下記コードを記述すればOK。
.radio__btn {
appearance: none;
}そしてspanタグにbeforeの疑似要素を作成します。
このbeforeを使って、ラジオボタンの枠部分を作成するという仕組みです。
beforeを使い、ラジオボタンの枠部分を作成。
.radio__text::before {
content: '';
display: block;
border-radius: 50%;
background-color: #000066;
width: 25px;
height: 25px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}あとはlable部分をクリックした時に、丸いボタンがでるようにすれば実装完了です。
やり方としては、spanタグのafter疑似要素を使います。
afterを使って、グレーの丸を作成。
.radio__btn:checked +.radio__text::after {
content: '';
display: block;
border-radius: 50%;
width: 13px;
height: 13px;
background-color: #ccc;
position: absolute;
top: 50%;
left: 6px;
transform: translateY(-50%);
}この1行目のコードを簡単に説明すると
「.radio__btnのinputタグがチェックされたら、直後に隣接してるspanタグ（radio__text）のafterを反映する」
という意味。
つまりlabelで囲まれてる部分をクリックしたら、作成したafterが表示されます。
するとこうなる↓
これでカスタマイズしたラジオボタンの完成！
【CSS】ラジオボタンのカスタマイズ方法【画像利用編】
先ほどは疑似要素でラジオボタンをcssで作成しました。
ただデザインによっては画像を利用する場合もあるはず。
そこで画像を利用してカスタマイズしたラジオボタンを紹介していきます。
そんなサンプルがこちら↓
See the Pen ➀ラジオボタンのカスタマイズ by jito-coder (@jito-coder) on CodePen.
クリックしたら僕のアイコンが表示されますよね。
afterに対しての記述を変更しました。
background-imageを使い画像を反映。
.radio__btn:checked +.radio__text::after {
content: '';
display: block;
position: absolute;
background-image: url(https://jito-site.com/wp-content/uploads/2023/01/jito-icon.png);
background-repeat: no-repeat;
background-size: contain;
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 6px;
transform: translateY(-50%);
}この方法なら画像を利用しないとカスタマイズできないラジオボタンも実装可能です！
【CSS】ラジオボタンのカスタマイズ方法【コピペOK】：まとめ
- デフォルトのラジオボタンを非表示に
- spanタグのbeforeでラジオボタン大枠作成
- クリックしたらafterの丸ボタンを表示
- 画像を利用してカスタマイズも可能
ラジオボタンのカスタマイズはよくするので覚えておこう！
