The styling of check boxes and radio buttons became possible with the introduction of the :checked pseudo-class in CSS3. A pure CSS method.
Demo here: Demo
Download from: Download
HTML of the following form is used for each checkbox or radio button:
Checkbox
<label class="checkbox-css">
<input type="Checkbox" name="checkbox" checked="">
<span></span> Check label
</label>
Radio button
<label class="radio-css">
<input type="radio" name="radio" checked="">
<span></span> radio label
</label>
Use CSS3 For check boxes and radio buttons in the style sheet:
.checkbox-css, .radio-css {
line-height: 30px;
padding-left: 30px;
position: relative;
}
.checkbox-css > input[type="checkbox"], .radio-css > input[type="radio"] {
height: 0;
opacity: 0;
position: absolute;
width: 0;
}
.checkbox-css, .radio-css {
line-height: 30px;
padding-left: 30px;
position: relative;
}
.checkbox-css > input[type="checkbox"], .radio-css > input[type="radio"] {
height: 0;
opacity: 0;
position: absolute;
width: 0;
}
.checkbox-css > input[type="checkbox"] + span, .radio-css > input[type="radio"] + span {
border: 2px solid #333;
bottom: 0;
left: 0;
margin: auto;
position: absolute;
top: 0;
height: 15px;
width: 15px;
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.radio-css > input[type="radio"] + span {
border-radius: 50%;
}
.radio-css > input[type="radio"]:checked + span, .checkbox-css > input[type="checkbox"]:checked + span {
background-color: #1038ef;
}