ラジオボタンの装飾について

この記事はラジオボタンの装飾についての解説していきます。inputタグを使用してラジオボタンの装飾ってほんとに困りますよね。記事を最後まで読んで、ぜひ参考にしてみてください。

今回は以下の画像のようなラジオボタンを作っていきます。

HTML

今回はパーツで使用しやすいようにFLOCSSの命名規則で書いていきます。

以下がHTMLのコード例です。

<div class="c-radio">
   　<input type="radio" name="btn" class="c-radio__input" id="radiobtn"/>
     <label class="c-radio__label" for="radiobtn">ラジオボタン</label>
</div>

div要素で囲んでいるのは、後々余白をつけたりするときに便利なのでつけています。

Sass

今回のコードはSassを使用して書いていきます。コピペするだけで使えるようにしてあるので、ぜひ使用して自分でカスタムしてみてください。

それでは、以下がコード例です。

.c-radio{
    &__input{
        display: none;
    }

    &__label{
        cursor: pointer;
        position: relative;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.625em;
        padding-left: 2.75em;
    }

    //装飾共通部分
    @mixin before-after(){
        content: "";
        display: block; 
        position: absolute;
        border-radius: 50%;
    }

    //装飾内側
    &__label::after{
        @include before-after();
        background: #FF8A00;
        opacity: 0;
        height: 0.75em;
        width: 0.75em;
        top: 50%;
        left: 0.438em;
        transform: translate(0,-50%);
    }

    //装飾外側
    &__label::before{
        @include before-after();
        background: #F3F6FA;
        border: 1px solid #ddd;
        width: 1.625em;
        height: 1.625em;
        top: 50%;
        left: 0;
        transform: translate(0,-50%);
    }

    &__input:checked + .c-radio__label::after {
        opacity: 1;
    }
}

まず、以下のコードでデフォルトのラジオボタンの装飾を非表示にしていきます。

 &__input{
     display: none;
 }

次に、疑似要素のbefore,afterを使用して装飾部分を作っていきます。

    &__label{
        cursor: pointer;
        position: relative;
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.625em;
        padding-left: 2.75em;
    }

    //装飾共通部分
    @mixin before-after(){
        content: "";
        display: block; 
        position: absolute;
        border-radius: 50%;
    }

    //装飾内側
    &__label::after{
        @include before-after();
        background: #FF8A00;
        opacity: 0;
        height: 0.75em;
        width: 0.75em;
        top: 50%;
        left: 0.438em;
        transform: translate(0,-50%);
    }

    //装飾外側
    &__label::before{
        @include before-after();
        background: #F3F6FA;
        border: 1px solid #ddd;
        width: 1.625em;
        height: 1.625em;
        top: 50%;
        left: 0;
        transform: translate(0,-50%);
    }

今回のコードはlabelのフォントサイズを変更すれば、すべて可変されるように作成してあるので、ぜひ使ってみてください。

最後に、以下のコードでチェックを付けたときにafter要素が表示されるようにスタイルを指定します。

    &__input:checked + .c-radio__label::after {
        opacity: 1;
    }

まとめ

この記事はラジオボタンの装飾について解説しました。ラジオボタンの装飾は頭を悩ませている人も多いのではないでしょうか。ラジオボタンの装飾は疑似要素を使ったり難しいと思いますが、使用する機会があると思うのでどんどん使って慣れていきましょう。

「読んだだけでは100%身に付きません」

必ず行動に移してください。

そう言っても、

行動する人は20%

それを継続する人は5%

行動し続けるだけで、

上位5％に入ることができます。

今すぐ行動して上位5％に入り、

Web制作で本気で人生変えたい

そんな人は今すぐ登録してください

今行動しなきゃ、人生変わらないですよ

こちらの公式LINEではTwitter開始して1週間で案件獲得した勉強法、仕事の取り方などweb制作での収益化の方法を発信しています！

是非登録してみて下さい！