HTMLでカスタムチェックボックスを作る方法.純粋なCSS

こんにちは、あなたがここにいることをうれしく思います.私はKunaalと今日、我々はスタイルのチェックボックスをHTMLで見る方法が表示されます.どのように簡単にウェブサイトの独自のチェックボックスを作ることができます.以下のデモを見ることができます.

デモ

チュートリアル
あなたがこの記事を見つけるか、より良い説明のために.あなたはビデオチュートリアルを見ることができます.

If you like the video tutorial. Please consider subscribing my youtube channel.

コードしましょう
内部のボディータグは、チェックボックスを作ります
HTML

<label for="checkbox">
    <input type="checkbox" id="checkbox">
    <div class="circle"></div>
</label>
<label for="checkbox2">
    <input type="checkbox" id="checkbox2">
    <div class="circle"></div>
</label>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #6da8ff;
}

label{
    position: relative;
    width: 120px;
    height: 50px;
    border-radius: 50px;
    background: #fff;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    margin: 10px 0;
}

input{
    display: none;
}

.circle{
    width: 110px;
    height: 110px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .5s ease-in-out;
    pointer-events: none;
}

.circle::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #ff6262;
    transition: .5s;
    transition-delay: .5s;
    border-radius: 50%;
}

input:checked ~ .circle{
    transform: translate(-50%, -50%) rotate(180deg);
}

input:checked ~ .circle::before{
    background: #6fff57;
}

私はあなたがすべてを理解してほしい.あなたが疑いを持っているか、あなたが私が作ったどんな間違いでも見つけるか、あなたがどんな提案でもコメントで私に尋ねるのが自由であるとわかるならば.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

,