Styled Checkboxes Without Javascript

No javascript AND it works in IE7. BOOYA! http://reference.sitepoint.com/css/adjacentsiblingselector

by Wray Bowling

HTML

<input id="checkers-1" type="checkbox" checked>
<label for="checkers-1">One</label>

<input id="checkers-2" type="checkbox">
<label for="checkers-2">Two</label>

<input id="checkers-3" type="checkbox">
<label for="checkers-3">Three</label>

CSS

*{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:inherit;
}

body{
    padding:80px;
    font-family:Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size:30px;
}

/* where the magic happens */

input[type="checkbox"]{
    display:none;
}

input + label{
    display:block;
    line-height:2em;
    cursor:pointer;
}

input[type="checkbox"] + label:before{
    display:inline-block;
    content:'';
    float:left;
    margin:0.5em;
    width:1.4em;
    height:1.2em;
    font-size:95%;
    line-height:1.2em;
    border-radius:100%;
    text-align:center;
    color:white;
    background-color:hsl(331,10%,50%);
}

input[type="checkbox"] + label:hover:before{
    background-color:hsl(331,10%,80%);
}

input[type="checkbox"]:checked + label:before{
    background-color:hsl(64,60%,50%);
}

input[type="checkbox"]:checked + label:before{
    content:'✓';
}

input[type="checkbox"]:checked + label:before:hover{
    background-color:hsl(64,60%,80%);
}

input + label:after{
    display:block;
    content:'';
    clear:both;
}