Styling Checkboxes – Why?
The base checkbox styling leaves a lot to be desired. With designs becoming more and more beautiful, why shouldn’t your checkboxes reflect that?
This method uses CSS and fonts to style checkboxes without having to resort to javascript or image files. Font family selection can affect the output. Styling checkboxes is a somewhat hazy field, but it’s getting better!
Note: It’s important to have the “id” of the checkbox match the “for” attribute of the label to get this to work
HTML:
<input id="example-checkbox" type="checkbox" /> <label for="example-checkbox"> Example checkbox</label>
CSS:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label:before {
content: '\00a0'; /* non-breaking space */
display: inline-block;
width: 1.3em;
height: 1.3em;
font-size: 1em;
font-family: 'Arial Unicode MS';
border: 1px solid #999999;
color: #30BB02;
background:#ffffff;
text-align: center;
cursor: pointer;
border-radius:3px;
-webkit-border-radius: 3px
}
input[type="checkbox"]:checked + label:before {
content: '\2714'; /* check mark */
background:#E7FFDF;
border-color:#30BB02
}