Hello Reader's if you are looking for slider design of checkbox then this blog will be helpful to you.

Lets see how to make checkbox with slider desing. First we will create the html file and it's code will go like this:-

<div>
    <input type="checkbox" id="toggle" name="toggle" class="toggle1" />
    <label for="toggle">first toggle1</label>
</div>

Finally we will code it's css which will create the box and toggle slider inside it :-

input.toggle1:empty ~ label:off, 
input.toggle1:empty ~ label:on
{
    position: absolute;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    content: ' ';
    width: 2.8em;
    background-color: #d45f65;
    border-radius: 0.3em;
    box-shadow: inset 0 0.2em 0 rgba(0,0,0,0.3);
    -webkit-transition: all 100ms ease-in;
    transition: all 100ms ease-in;
}

input.toggle1:empty ~ label:on
{
    width: 1.4em;
    top: 0.1em;
    bottom: 0.1em;
    margin-left: 0.1em;
    background-color: #fff;
    border-radius: 0.15em;
    box-shadow: inset 0 -0.2em 0 rgba(0,0,0,0.2);
}

Now if you run this code, It will preview the toggle button inplace of a checkbox. Which will show either on or off. This will create a more effective way to enhance your html web form. But only last this in slider is to change the color when user interact with it.
Lets say if user click it then it must turn blue and if click off then it should change to grey.
So we are writing the code for it. and it will go like this:-

input.toggle1:checked ~ label:off
{
    background-color: #337ab7;
}

input.toggle1:checked ~ label:on
{
    margin-left: 2em;
}

Now this is it. And on loading the page the color will indicate weather the checkbox is on or off. You must remember the functionality of the checkbox will remain unchanged. The post value of the check box will be same as it send earlier.

Output:-