将复选框检查图像更改为自定义图像

Question

我正在尝试使用CSS更改复选框的默认“框图像”，但是它不起作用。有没有办法解决？

.class_checkbox{
    background: url("../images/button_bullet_normal.png") no-repeat scroll 0 0 transparent;
}



<input type="checkbox" class="class_checkbox">

Answer 1

尝试：

<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'))
});






$('.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">