IMAGE IN: http://s29.postimg.org/40ztnp9ab/checkbox.png

CSS:

/** COPY IN YOUR CSS **/
.checkbox {
    background: transparent url('../images/checkbox.png') no-repeat;
    background-position: 0 0;
    width: 28px;
    height: 24px;
    display: inline-block;
    cursor: pointer;
}

.checkbox.checked {
    background-position: 0 -24px;
}

.checkbox.red {
    background-position: 0 -48px;
}

.checkbox.red.checked {
    background-position: 0 -72px;
}
/** END COPY IN YOUR CSS **/

HTML:

<!-- INPUT HTML MARKUP -->
<input style="display:none" type="checkbox" name="custom_checkbox" id="custom_checkbox" value="1" checked="checked">
<span id="custom_checkbox_design" class="checkbox checked" style="float: left; padding-left: 5px"></span>
<!-- END INPUT HTML MARKUP -->

Put a nice checkbox customized input in your html forms.

Custom checkbox design

HTML