Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make slide check box in html using CSS?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 261
    Comment on it

    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:- alt text

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: