Change checkbox check image to custom image

Question

I am trying to change the default \'box image\' of the checkbox with CSS, but it is not working. Is there any way around this?

Answer 1

Try:

jQuery

$('.input_class_checkbox').each(function(){
    $(this).hide().after('
');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

Fiddle: http://jsfiddle.net/cn6kn/

$('.input_class_checkbox').each(function(){
    $(this).hide().after('
');

});

$('.class_checkbox').on('click',function(){
    $(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

.class_checkbox {
    width: 20px;  
    height: 20px;
    background-color: red;
}
.class_checkbox.checked {
    background-color: green;
}