Change checkbox check image to custom image
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">
You can use pure css, just add a label to the checkbox like this:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
Example HTML:
.check_box {
display:none;
}
.check_box + label{
background:url('images/check-box.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
.check_box:checked + label{
background:url('images/check-box-checked.png') no-repeat;
height: 16px;
width: 16px;
display:inline-block;
padding: 0 0 0 0px;
}
<input type="checkbox" class="check_box" id="checkbox1">
<label for="checkbox1">
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">