CSSでラジオボタンを装飾する方法について記します。
Contents
フォーム要素は装飾しにくい
フォームの要素（チェックボックス・ラジオボタン・セレクトボックス）などは要素自体にCSSを適用してもあまり見た目が変更できません（accent-colorで色ぐらいは変えれるようですが）。
ではどうするかというと疑似的にラジオボタンを作成して、元のラジオボタンと連動させるという方法をとります。
HTML
label要素でinput[type=radio]を囲んだシンプルなHTMLです。
ひとつ違うのはdummyクラスがついている要素で、これが疑似ラジオボタンになります。
<label class="deco-radio">
<input type="radio" name="sample_radio" value="0">
<span class="dummy"></span>
<span>サンプルラジオ1</span>
</label>
<label class="deco-radio">
<input type="radio" name="sample_radio" value="1">
<span class="dummy"></span>
<span>サンプルラジオ2</span>
</label>CSS
CSSはこのようになります。
4~13行目でラジオボタンの外側を、14~20行目でラジオボタン内側を変更できます。
.deco-radio { display: block; font-size: 24px; }
.deco-radio:hover { cursor: pointer; }
.deco-radio input { display: none; }
.deco-radio input+.dummy {
width: 20px;
height: 20px;
border: 2px solid #3F51B5;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: text-top;
}
.deco-radio input:checked+.dummy:after {
content: "";
width: 70%;
height: 70%;
background-color: #3F51B5;
border-radius: 50%;
}
デモ
動きを確認できるデモを用意しました。
ぜひ、チェックしてみてください。
以上、CSSでラジオボタンを装飾する方法でした。
チェックボックスの装飾方法はこちらの記事が参考になるかと思います。
【CSS】チェックボックスを装飾する
ソースコード全文
最後にソースコードを全文載せてきます。
<style>
.deco-radio { display: block; font-size: 24px; }
.deco-radio:hover { cursor: pointer; }
.deco-radio input { display: none; }
.deco-radio input+.dummy {
width: 20px;
height: 20px;
border: 2px solid #3F51B5;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
vertical-align: text-top;
}
.deco-radio input:checked+.dummy:after {
content: "";
width: 70%;
height: 70%;
background-color: #3F51B5;
border-radius: 50%;
}
</style>
<label class="deco-radio">
<input type="radio" name="sample_radio" value="0">
<span class="dummy"></span>
<span>サンプルラジオ1</span>
</label>
<label class="deco-radio">
<input type="radio" name="sample_radio" value="1">
<span class="dummy"></span>
<span>サンプルラジオ2</span>
</label>
コメント