CSS-Only Stylish Checkboxes and Radios

I recently struggled with styling checkboxes and radios with CSS. While I could use libraries like iCheck, I wanted to avoid Javascript and jQuery. Why add another library to application just for the sake of visual styles?

Here is my implementation of CSS-Only solution to this problem.

Check Live Demo

Checkboxes and radio buttons after styling

It's easy:

Create a plain checkbox in this format:

<div class='example' >
<input type='checkbox' id='my-checkbox' >
<label for='my-checkbox' >My Checkbox</label >
</div >
<div class='example' >
<input type='radio' name='radio-group-1' id='my-radio1' >
<label for='my-radio1' >My Radio 1</label >
<input type='radio' name='radio-group-1' id='my-radio2' >
<label for='my-radio2' >My Radio 1</label >
</div >
regular checkbox and radio buttons

Apply following CSS styles. I have added comments with each style, it should be self explanatory.

/* Hide the checkbox/radio. We will simulate it later using label */
input[type=checkbox], input[type=radio] {
opacity: 0;
position: absolute;
}

/* Some basic styling for alignment and more */
input[type=checkbox], input[type=checkbox] + label, input[type=radio], input[type=radio] + label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
user-select: none;
}

/* CSS Pseudo class "before" to show checkbox/radio box. Will be attached to every label adjacent to input checkbox.*/
input[type=checkbox] + label:before, input[type=radio] + label:before {
font-family: 'FontAwesome';
background: #f1fff6;
display: inline-block;
vertical-align: middle;
width: 20px;
margin-right: 10px;
text-align: center;
font-size: 12px;
padding: 4px 0;
color: #e4efe5;
transition: color .4s;
border: 1px solid #3faf2d;
}

/* Tick inside checkbox. I am using Font-awesome's tick, but you can use plain unicode tick */
/* or any other symbol you want. */
input[type=checkbox] + label:before {
content: '\f00c';
border-radius: 2px;
}

/* Circle inside radio circle. Border-radius to make it a circle. */
input[type=radio] + label:before {
content: '\f111';
border-radius: 50%;
}

/* Styles when checkbox/radio is checked */
input:checked + label:before {
background: #288619;
color: #FFF;
}

/* Styles when checkbox/radio is disabled */
input[type=checkbox][disabled] + label:before, input[type=radio][disabled] + label:before {
color: #d0d0d0;
background: #bfbfbf;
border: 1px solid #656b64;
}

Here is full example:

It works with most modern browsers, including IE9+ (tested in IE11, but should work in IE9)

Credit goes to multiple posts on stackoverflow as well as many blog posts.

Steal this code at your own Peril!