Styled Checkbox

Styling Checkboxes with CSS

by Mike Cunneen

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<span class="bigcheck">
    <label class="bigcheck">Cheese
        <input type="checkbox" class="bigcheck" name="cheese" value="yes"/>
        <span class="bigcheck-target"></span>
    </label>
</span>

CSS

span.bigcheck-target {
    font-family: FontAwesome; /* use an icon font for the checkbox */    
}
input[type='checkbox'].bigcheck {     
    position: relative;
    left: -999em; /* hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
    content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}
input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
    content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}

/* ==== optional - colors and padding to make it look nice === */
body { 
    background-color: #2C3E50; 
    color: #D35400; 
    font-family: sans-serif;
    font-weight: 500;
    font-size: 4em; /* set this to whatever size you want */
}
span.bigcheck { 
    display: block;
    padding: 0.5em;;
}