Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to Customize Checkbox With the Help of CSS?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 670
    Comment on it

    s we know checkboxes look and feel is dependent on the operating system in which we are seeing them .For windows operating system they look different and for mac operating system they look different. It is very difficult to change the look of the checkboxes. For changing the look of the checkboxes we have to create custom checkboxes.

    Most techniques you'll find will use javascript for customizing the look of the checkboxes but in this blog, I will show you how you can customize the look of checkboxes with the help of CSS.

    Below is the HTML code which contains code for checkboxes.

    <ul>
    
                              <li>
                               <input id="Jiu" class="cust-checkbox" name="Jiu jitsu" type="checkbox" >
                               <label for="Jiu" class="cust-checkboxLabel">Jiu jitsu</label>
                             </li>
                             <li>
                               <input id="Boxing" class="cust-checkbox" name="Boxing" type="checkbox" >
                               <label for="Boxing" class="cust-checkboxLabel">Boxing</label>
                             </li>
                             <li>
                               <input id="Kick" class="cust-checkbox" name="Kick Boxing" type="checkbox" >
                               <label for="Kick" class="cust-checkboxLabel">Kick Boxing / Muay Thai</label>
                             </li>
                          
    </ul>

    Below is the css for above code:-

    .cust-checkbox{
    opacity: 0;
    position: absolute;
    }
    .cust-checkbox, .cust-checkboxLabel {
    display: inline-block;
    vertical-align: middle;
    margin: 0px;
    cursor: pointer;
    font-weight: normal;
    display: block;
     position: relative;
     z-index: 2;
    font-family: 'robotoregular'
    }
    .cust-checkbox + .cust-checkboxLabel:before{
    content: '';
    background: #FFFFFF;
    border: 1px solid #787974;
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 15px;
    margin-right: 15px;
    text-align: center;
    position: absolute;
    right: -7px;
    top:2px;
    }
    .cust-checkbox:checked + .cust-checkboxLabel:before {
    content: "";
    font-size: 17px;
    color: #fff;
    line-height: 26px;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    background: #fff url('../img/icons/icon_checked_tickmark.png') no-repeat;
        border: 2px solid #fff;
        border-radius: 0;
    }
    .cust-checkbox[disabled] + .cust-checkboxLabel:before{
    background: #ccc;
    border-color: #aeaeae;
    cursor: no-drop;
    }
    .cust-checkbox[disabled] + .cust-checkboxLabel{
    color:  #aeaeae;
    cursor: no-drop;
    }

    Working demo:- https://jsfiddle.net/draqpbja/4/

 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: