DEV Community

Cover image for How to make custom checkbox in HTML. Pure CSS
Modern Web
Modern Web

Posted on • Updated on

How to make custom checkbox in HTML. Pure CSS

Hello, glad you are here. I am kunaal and today we will see how to style checkbox in HTML. How we can easily make our own custom checkbox for website. You can see demo below.


Video Tutorial -

If you find this article hard or for better explanation. You can watch video tutorial.

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

Let's code

Inside body tag lets make some check boxes


<label for="checkbox">
    <input type="checkbox" id="checkbox">
    <div class="circle"></div>
<label for="checkbox2">
    <input type="checkbox" id="checkbox2">
    <div class="circle"></div>
Enter fullscreen mode Exit fullscreen mode


    margin: 0;
    padding: 0;
    box-sizing: border-box;

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

    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;

    display: none;

    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;

    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;
Enter fullscreen mode Exit fullscreen mode

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

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.

My youtube Channel, Instagram

Top comments (0)