Styling Checkboxes With CSS Only

styling checkboxes

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
}

Demo: https://jsfiddle.net/jungalist/hcm0at3h/

Leave a comment

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.