这是我的代码
<div class="itemTaskUser">
<input type="checkbox" name="users" id="user0" style="display: none">
<label for="user0" class="checkbox-inline">
<div>Rodolphe</div>
<img src="rodo.jpg" class="avatar32" >
</label>
</div>
我试图实现的是设置一个 CSS,当复选框被选中时,它将在 img 上放置一个绿色边框
我试过:
input:checked + label {
color:green;
font-weight: bold;
}
input:checked + img {
border:2px solid green;
width: 64px;
}
选中复选框时标签为绿色:GOOD
但是没有图像!
有什么线索吗?
最佳答案
有问题的代码的问题是 label
是 input
而不是 img
的相邻兄弟,所以第二个选择器不选择任何元素。
+
是 adjacent sibling combinator用于选择 DOM 中引用元素旁边的元素。这里的 label
是 input
(reference 元素)和 img< 的直接兄弟
是 label
的子项,因此使用 input:checked + label img
将 选择 img
它是 label
< strong>这又是已检查输入的相邻兄弟。
input:checked + label {
color: green;
font-weight: bold;
}
input:checked + label img {
border: 2px solid green;
width: 64px;
}
<div class="itemTaskUser">
<input type="checkbox" name="users" id="user0" style="display: none">
<label for="user0" class="checkbox-inline">
<div>Rodolphe</div>
<img src="rodo.jpg" class="avatar32">
</label>
</div>
我们也可以使用 input:checked + label > img
作为选择器。这将进一步缩小范围,因为 >
combinator将选择 img
仅当它是 label
的 child 并且不是孙子或曾孙时孙子等
关于css - 选中复选框时如何更改 img 样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41911556/