Change checkbox check image to custom image
css, html, xhtml
Solution
Try:
<input type="checkbox" class="input_class_checkbox">
jQuery
$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');
});
$('.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('<div class="class_checkbox" />');
});
$('.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="input_class_checkbox">
Problem
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? ``` .class_checkbox{ background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent; } ``` ``` <input type="checkbox" class="class_checkbox"> ```