Check box CSS Make Gradient Checkbox with pure CSS. Custom Input Html
Tags: html, css, beginners, uiweekly
Published: 2021-08-03 14:29:34

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

{% youtube XyKMOR0l8zo %}

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.

```HTML
<input type="checkbox" class="checkbox">
```
And center it with CSS using flex box.
```CSS
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

######Output

![Capture](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/od4g8nbc4lu0p8oqsm3k.PNG)

Now Style Checkbox.

```CSS
.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
![Capture-2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66cvajnfenryrkg1v54n.PNG)

`-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.

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

######Output (when it is checked)
![Capture-3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1dt7c9h8gwd45ru4crt.PNG)

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. 

```CSS
.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)
![Capture-4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lai2eawjqbxfrsyksvvi.PNG)

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

```CSS
.checkbox::before{
    // previous styles
    display: none;
}
``` 
And again use `:checked` event to check for input check.

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

######Output

![Gradient Checkbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxp01ezpfjh35tjgh2r9.gif)

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](https://dev.to/kunaal438/css-position-everything-you-need-for-good-developer-pfh)
2. [Pure CSS Wavy Button](https://dev.to/kunaal438/create-awesome-wavy-button-hover-effect-pure-css-wavy-design-1722)
3. [Top 10 CSS Effects](https://dev.to/kunaal438/css-the-best-css-effects-of-all-time-most-underrated-web-ux-2chj)
4. [Infinte CSS loader](https://dev.to/kunaal438/quick-css-make-infinity-loading-animation-for-your-next-website-187k)
5. [Youtube Clone : Youtube API](https://dev.to/kunaal438/create-working-youtube-clone-with-search-box-youtube-api-2a6e)

If you like, you can subscribe my youtube channel. I create awesome web contents. [Subscribe](https://www.youtube.com/c/modern_web?sub_confirmation=1)

Thanks For reading.