Doodle Checkboxes

by Lucas Krause

HTML

<input type="checkbox" id="a" /><label for="a">Checkbox</label>

CSS

[type='checkbox'] {
    display:none;
}
[type='checkbox'] + label::before {
    content:"\2610";
    /**/
    font-size:19px;
    /*/
    font-size:20px; /*or 22px* / 
    /**/
    vertical-align:middle;
}
[type='checkbox'] + label:not(:empty)::before {
    margin-right:5px;
}
[type='checkbox']:checked + label::before {
    content:"\2611";
}

JavaScript

/**
 * The problem: Every checkbox needs a label
 * The solution for this problem: Only checkboxes with the class .x will be *replaced*
 */