Question

我正在尝试实现此功能，但是当我单击复选框（选中复选框）时，复选框不会更改其背景图像并保持原样。

我是如何尝试这样做的：

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

和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;
}

单击复选框后，为什么图像未切换一次？

谢谢

Answer 1

CSS的最后一位应该是：

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

删除+ span.private_zip部分。

Answer 2

阅读本文

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

UI元素状态伪类部分

我希望这会有所帮助

如果选中，则更改复选框的图像背景

2 个答案: