Issue
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.
Solution
Here is an example, done with a little jQuery and CSS: DEMO
$(".checkbox").click(function() {
$(this).toggleClass('checked')
});.checkbox {
width: 23px;
height: 21px;
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 0 50%
}
.checked {
background: transparent url(http://i.stack.imgur.com/S4p2R.png ) no-repeat 80% 50%
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="checkbox">
</div>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