JSFiddle - React, Tailwind, and code Playground

by John Folley

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
<div class="well">
    <label class="checkbox fancy-checkbox">
        <input type="checkbox" runat="server" />
        <i class="icon-check-empty"></i>
        <i class="icon-check"></i>
        This is a checkbox
    </label>
</div>

<div class="well">
    <label class="checkbox">
        <input type="checkbox" />
        This is another checkbox
    </label>
</div>

CSS

.well{
    margin-top:1em;
}

.fancy-checkbox i.icon-check,
.fancy-checkbox i.icon-check-empty{
    float: left;
    margin-left: -20px;
    font-size:18px;
    vertical-align: bottom;
    margin-top:2px;
}

.fancy-checkbox input[type=checkbox],
.fancy-checkbox i.icon-check,
.fancy-checkbox [type="checkbox"]:checked ~ i.icon-check-empty{
    display:none;
}
.fancy-checkbox i.icon-check-empty,
.fancy-checkbox input[type=checkbox]:checked ~ i.icon-check{
    display:inline-block;
}