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/