Custom radio button & custom checkbox styling using CSS

Custom radio and custom checkbox design using CSS

We are hiding default form element using CSS. The “for” attribute specifies which form element is bound to the label. So, label will act as an input element. “Id” name of the form element and “for” attribute name should be same.

I have used images for active & inactive mode. Instead of images we can use font-awesome.

HTML:


//Custom radio button
<input id="apple" name="fruits" type="radio" />
<label for="apple">
<img class="offradio" height="20" src="images/form_btn-radio-off.png" width="20" /> //Inactive image
<img class="onradio" height="20" src="images/form_btn-radio-on-01.png" width="20" />  //Active image
</label>
//Custom checkbox 
<input id="fruits" name="fruits" type="checkbox" />
<label for="fruits">
<img class="offradio" height="20" src="images/form_box-off.png" width="20" />
<img class="onradio" height="20" src="images/form_box-on.png" width="20" />
</label>

CSS:


input[type="radio"], input[type="checkbox"] {
    display: none;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio{
 display: block;
}
/* Hidding the "check" status of inputs */
input[type="radio"] + label .onradio,
input[type="checkbox"] + label .onradio {
display: none;
}
/* Styling the "check" status */
input[type="radio"]:checked + label .onradio,
input[type="checkbox"]:checked + label .onradio {
display: block;
}
input[type="radio"]:checked + label .offradio,
input[type="checkbox"]:checked + label .offradio {
display: none;
}

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *