Change image background for checkbox if is checked

Question

I am trying to implement this functionality, but when I click on checkbox (the checkbox is checked) then the checkbox doesn't change its background image and remaining as before.

How I am trying to do that:

<div class="checkbox">
  <input class="car_checkbox" type="checkbox" value="1">
  <span class="private_zip"></span>
</div>

and CSS:

input[type="checkbox"] {
    opacity:0;
    height: 18px;
    width: 18px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

input[type="checkbox"] + span.private_zip {
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url("checkbox.png") no-repeat;
}

input[type="checkbox"]:checked + span.private_zip {
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url("checkbox_check.png") no-repeat;
}

Why the image is not switched once is the checkbox clicked?

Thank you

Answer 1

The last bit of your CSS should be:

input[type="checkbox"]:checked {
  width: 18px;
  height: 18px;
  display: inline-block;
  background: url("checkbox_check.png") no-repeat;
}

Remove the + span.private_zip part.

Answer 2

Read this

https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors

UI element state pseudo-classes section

I hope this will help