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?

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

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

Answer 1

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">

Answer 2

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">