Super Simple CSS Custom Checkbox

Use labels "for" to check and uncheck checkboxes, hide the real checkboxes then style your label.

by kivancpehlivan

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<input type="checkbox" id="myCheckbox" />
<label for="myCheckbox" class="myCheck">
    <i class="fa fa-check-square"></i>  <span class="checkboxText">Check Me!</span>
</label>

CSS

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

input[type="checkbox"] + label {
    font-size: 25px;   /* defines the size of the check box */
    cursor: pointer;
    
}

input[type="checkbox"] + label i {
    color: white;
    border:2px solid #ccc;
}

input[type="checkbox"]:checked + label i{
    color: orange;
    border:2px solid orange;
}