Implementing Custom Checkboxes and Radio Buttons with CSS3

On 03.28.13, In BLOG, BLOGGING, blogs, Code, CSS, HTML and XHTML, Scripting, css 3, by

Something that has always annoyed me is the lack of customization (without javascript) of form elements. It might have been possible (other than padding) before CSS3, but CSS3 certainly has made modifying these form elements easier. Whether you want to customize the color, look and feel, or just the size of these buttons, you can now easily do it through CSS.

Step 1 – Hide the boxes


input[type=radio],
input[type=checkbox] {
display: none;
}

Step 2 – Stylize the before


.radio label:before {
border-radius: 8px;
}
.checkbox label:before {
border-radius: 3px;
}

Step 3 – Stylize the after


input[type=radio]:checked {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}

input[type=checkbox]:checked {
content: "\2713";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
font-size: 15px;
color: #f3f3f3;
text-align: center;
line-height: 15px;
}

What you get is something like this:

Working Demo Here