megwoo
6/25/2015 - 7:24 PM

CSS Fancy Checkboxes

// Fancy checkboxes
function customCheck(checkName, excludeClass){
	var selector = 'input[type="'+ checkName +'"]:not(".'+excludeClass+'")';
    var checkBox = $(selector);
    $(checkBox).closest(function(){
        $('label').prepend('<span></span>');
    });
}
customCheck('checkbox', 'not-fancy');


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

input[type="checkbox"] + label {
	padding: 0 !important;
	margin-top: 10px;
}

input[type="checkbox"] + label span {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: -6px 5px 2px 0;
    vertical-align: middle;
    background: url(../images/checkbox.png) no-repeat left center;
    cursor: pointer;
}

input[type="checkbox"]:checked + label span {
    background: url(../images/checkbox-checked.png) no-repeat left center;
}