[英]Change image background for checkbox if is checked
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: 和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 谢谢
The last bit of your CSS should be: CSS的最后一位应该是:
input[type="checkbox"]:checked {
width: 18px;
height: 18px;
display: inline-block;
background: url("checkbox_check.png") no-repeat;
}
Remove the + span.private_zip
part. 删除
+ span.private_zip
部分。
Read this 读这个
https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors https://www.w3.org/community/webed/wiki/Advanced_CSS_selectors
UI element state pseudo-classes section UI元素状态伪类部分
I hope this will help 我希望这个能帮上忙
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.