Styled Checkbox

Styling Checkboxes with CSS

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<h3>Checkbox</h3>

<span class="bigcheck">
    <label class="bigcheck">Cheese
        <input type="checkbox" class="bigcheck" name="cheese" value="yes"/>
        <span class="bigcheck-target"></span>

</label>
</span>

<h3>Radio Buttons</h3>

<span class="bigcheck">
    <label class="bigcheck">Gouda
        <input type="radio" class="bigcheck" name="cheese" value="gouda"/>
        <span class="bigcheck-target"></span>

</label>
<label class="bigcheck">Cheddar
    <input type="radio" class="bigcheck" name="cheese" value="cheddar" /> <span class="bigcheck-target"></span>

</label>
<label class="bigcheck">Stilton
    <input type="radio" class="bigcheck" name="cheese" value="stilton" /> <span class="bigcheck-target"></span>

</label>
</span>

<h3>Toggle Switch (checkbox)</h3>

<span class="bigcheck toggle">
    <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.bigcheck {
    position: relative;
    left: -999em;
    /* hide the real checkbox */
    display:none;
}
input.bigcheck + span.bigcheck-target:after {
    content:"\f096";
    /* In fontawesome, is an open square (fa-square-o) */
}
input.bigcheck:checked + span.bigcheck-target:after {
    content:"\f046";
    /* fontawesome checked box (fa-check-square-o) */
}
.toggle input.bigcheck + span.bigcheck-target:after {
    content:"\f204";
    /* In fontawesome, is an open square (fa-square-o) */
}
.toggle input.bigcheck:checked + span.bigcheck-target:after {
    content:"\f205";
    /* fontawesome checked box (fa-check-square-o) */
}
/* ==== optional - colors and padding to make it look nice === */