Hello, welcome. In toady's article you'll learn to style checkbox. You'll learn to make custom checkbox for your site.

Checkbox are widely use in these days to collect data from user. We all have seen checkbox a lot. Today in this article you'll learn to style checkbox and give it a gradient background. This checkbox looks really good.

Video Tutorial

So, without wasting more time let's see how to code this.

Code

First, for this project we have 2 files index.html and style.css. Start by writing basic HTML structure. After that, create a checkbox.

<input type="checkbox" class="checkbox">

And center it with CSS using flex box.

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

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

Output

Now Style Checkbox.

.checkbox{
    -webkit-appearance: none;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    background: #f8f7f7;
    border: 5px solid #fff;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

Output

-webkit-appearance property is used to hide default input styles.

Now use :checked event to check that checkbox is checked or not. And set it's background to gradient color.

.checkbox:checked{
    background: linear-gradient(140deg, #ff6a6a 0%, #e6ff59 40%, #41c4fc 98%);
}

Output (when it is checked)

Now we have to make check sign. For this I'll use an image but you can create a check sign with pure CSS. It's totally up to you.

Use ::before pseudo element to add check image.

.checkbox:checked{
    background: linear-gradient(140deg, #ff6a6a 0%, #e6ff59 40%, #41c4fc 98%);
}

.checkbox::before{
    content: '';
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: url(check.png);
    background-size: contain;
    background-repeat: no-repeat;
}

Output(Not Checked)

As you can see we have check sign also. Now set it's display property to none to hide this.

.checkbox::before{
    // previous styles
    display: none;
}

And again use :checked event to check for input check.

.checkbox:checked::before{
    display: block;
}

Output

We are done.

So, that's it. I hope you understood each and everything. If you have doubt or I missed some thing let me know in the comments.

Articles you may found Useful

1. CSS Positions
2. Pure CSS Wavy Button
3. Top 10 CSS Effects
4. Infinte CSS loader
5. Youtube Clone : Youtube API

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.