Custom Checkbox

Step 1: Add this Jquery function

function xCheckbox(tgt){
	$(tgt+' input[type=checkbox]').each(function(){
        if(!$(this).parent().hasClass('xCheckbox')){
                $(this).fadeTo(0,0).wrap('


<div class="xCheckbox" style="position:relative;" />');
                $(this).css({'position':'absolute','width':'100%','height':'100%','left':'0','top':'0','z-index':'10'});
                if($(this).is(':checked')){$(this).parent().addClass('checked');}
                $(this).on('change',function(){
                if($(this).is(':checked')){
                    $(this).parent().addClass('checked');
                } else {
                    $(this).parent().removeClass('checked');
                }
            });
        }
    });
}

 

Step 2: Add this default css  Continue reading “Custom Checkbox”

Advertisements