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


<input id="example-checkbox" type="checkbox" />
<label for="example-checkbox"> Example checkbox</label>


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;
    text-align: center;
    cursor: pointer;
    -webkit-border-radius: 3px
input[type="checkbox"]:checked + label:before {
    content: '\2714'; /* check mark */


Leave a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.