【CSS】ラジオボタンを装飾する

装飾されたラジオボタン CSS



CSSでラジオボタンを装飾する方法について記します。




フォーム要素は装飾しにくい

フォームの要素(チェックボックス・ラジオボタン・セレクトボックス)などは要素自体に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>

コメント

タイトルとURLをコピーしました