我希望选区(:checked
)具有不同的背景颜色。
下面是我的示例代码:
label {
display: block;
background: gray;
border:1px solid black;
margin-bottom:5px;
padding:10px;
cursor: pointer;
}
label + [type="checkbox"]:checked {
background: yellow;
}
<div class="poll">
<label class="a"><input type="checkbox" /> Yes</label>
<label class="a"><input type="checkbox" /> No</label>
</div>
我的问题是关于:设计调查表
还要考虑这样一种情况,即输入在DOM中是预设的,但是隐藏了,所以标签仍然是可点击的,并且可以切换它。
1条答案
按热度按时间qvk1mo1f1#
您可以使用
:has
伪选择器执行以下操作:如果您需要浏览器向后兼容性支持,这里有一个技巧:
一个二个一个一个
OP在评论中问我一个为隐藏复选框量身定制的解决方案。
所需要做的就是在输入上使用
hidden
属性。不要使用CSS
display: none
来不呈现输入元素。最好使用designated attribute。💡 注意这在Firefox中也有一个bug。下面是一个克服它的Firefox黑客。
Firefox支持的解决方案:
将每个
input
提取到label
元素之上,并在每个input
元素上使用唯一的id
属性,在每个label
上使用匹配的for
属性: