Doodle/Custom checkboxes 2

by Lucas Krause

HTML

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

CSS

html {
    font-size:100%;
    font-family:"Helvetica Neue";
}

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

    [type='checkbox'] + label span {
        vertical-align:middle;
    }

JavaScript

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