Styled checkboxes and radio buttons only with CSS3
For a years we use javascript plugin for style checkbox and radio inputs. There was a lot of problems when we create dynamic content. But now we can use only CSS, in chrome or safari we have a special rule -webkit-appearance: none
so we can style directly input. For Firefox, Opera, IE9 we must use pseudo-element :before.
Html code
<div class="radio">
<input type="radio" name="radio" id="radio">
<label for="radio">Radio Button</label>
</div>
CSS code
Input should be clicable and invisible.
input[type="checkbox"],
input[type="radio"] {
float: left;
width: auto;
margin: 1px 5px 0 0;
position: relative;
z-index: 1;
opacity: 0;
}
We create pseudoelement before label tag and style as radio/checkbox button.
input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
content: ';
float: left;
width: 16px;
height: 16px;
position: relative;
font-size: 23px;
font-weight: normal;
line-height: 15px;
color: #888;
margin: -3px 10px 6px -20px;
border: solid 1px #ccc;
background: #fff;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
input[type="checkbox"] + label:before:hover,
input[type="radio"] + label:before:hover {
border-color: #aaa;
}
Create style for checked inputs.
input[type="radio"]:checked + label:before {
content: '●';
}
input[type="checkbox"]:checked + label:before {
content: '✓';
}
Solution use pure CSS and work for Chrome, Firefox, Opera and IE9>.
Source: http://www.adoumas.com/blogpost/pure-css3-checkboxes-and-radio-buttons