How to display image in place of checkbox?


I want to display green checked image when checkbox is checked and when not checked empty box. I tried to put checkbox in div and set div’s background but it is not helping me out. Any idea what to do? Below is the output I want.



Here is an example, done with a little jQuery and CSS: DEMO

$(".checkbox").click(function() {
.checkbox {
  width: 23px;
  height: 21px;
  background: transparent url( ) no-repeat 0 50%

.checked {
  background: transparent url( ) no-repeat 80% 50%
<script src=""></script>
<div class="checkbox">

Answered By – Anujith

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published