解放区在住氷翠 緑の閃光
【解放区在住氷翠】webアプリケーション

【CSS+JS】簡単なスイッチをデザインしてみよう

2022-10-19

どうも、氷翠です。

フォームを作成する中で、「input」タグの「type=”checkbox“」を利用したスイッチの様なデザインを目的としました。

今回はその成功した動画となります。

やはり「ON」と「OFF」という事案は発生するもので、これを分かりやすく見ただけでどうにかするためには「スイッチ」というデザインが必要になったわけです。

<div class="switch_block">
    <input type="checkbox" name="dummy" value="1">
</div>

実際のHTMLはこれだけで済みました。

CSSはやはり結構大きなものになりましたがｗ

.switch_block {
    position: relative;
    width: 80px;
    height: 40px;
    border: 1px solid #666;
    border-radius: 20px;
    background: rgb(32,32,32);
    background: -webkit-linear-gradient(0deg, rgba(32,32,32,1) 5%, rgba(55,55,55,1) 93%);
    background: -o-linear-gradient(0deg, rgba(32,32,32,1) 5%, rgba(55,55,55,1) 93%);
    background: linear-gradient(0deg, rgba(32,32,32,1) 5%, rgba(55,55,55,1) 93%);
}
.switch_block:before {
    content: '';
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgb(255,255,255);
    background: -webkit-linear-gradient(rgba(255,255,255,1) 5%, rgba(227,227,227,1) 93%);
    background: -o-linear-gradient(rgba(255,255,255,1) 5%, rgba(227,227,227,1) 93%);
    background: linear-gradient(rgba(255,255,255,1) 5%, rgba(227,227,227,1) 93%);
    position: absolute;
    top: 1px;
    left: 1px;
    transition-duration: 0.5s;
}
.switch_block:hover:before {
    background: rgb(255,255,255);
    background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 5%, rgba(227,227,227,1) 93%);
    background: -o-linear-gradient(180deg, rgba(255,255,255,1) 5%, rgba(227,227,227,1) 93%);
    background: linear-gradient(180deg, rgba(255,255,255,1) 5%, rgba(227,227,227,1) 93%);
}
.switch_block.on:before {
    left: calc(80px - 4px - 36px);
    transition-duration: 0.5s;
}
input[type="checkbox"] {
    display: none;
}

これらのコードの中にある「background」は普通に背景色として使っているだけで、必ず必要なものではない。

あとは「.switch_block.on:before」はスイッチをオンにしたときにボタンそのものがどの位置にあるのかを定義している。さらに「transition-duration: 0.5s;」で一応アニメーションの設定をしておく。

また、動画の中では完結にするために、Javascriptの方は、アニメーションのトリガーだけを記述していましたが、実際に使うためにはこれだけだと、チェックはされませんので、その辺のスクリプトも用意する必要があります。

$(document).on(
    'click',
    '.switch_block',
    function()
    {
        $(this).toggleClass('on');
        if($('input[type="checkbox"]').attr('checked'))
        {
            $('input[type="checkbox"]').attr('checked','checked');
        }
        else
        {
            $('input[type="checkbox"]').attr('checked',false);
        }
    }
);

こんな感じでクラス「.on」をつけたりはずしたりするのと同時に、チェックボックスに対してチェックを付けたり外したりする処理が必要になってきます。

コメントを残す

メールアドレスが公開されることはありません。