css3 :checked
如何处理隐藏元素?
我找到了自定义复选框和单选按钮 here is a demo .
首先将单选按钮设置为隐藏的地方:
input[type=radio]{display: none;}
并为标签应用 :before 伪
元素,使其看起来像标签之前的单选按钮。
但现在在用户选中按钮后,将应用以下 css 来显示选中。
input[type=radio]:checked + label:before{
所以,现在我的问题是单选按钮是如何被用户选中和取消选中的,示例使用 display: none
到单选按钮,为此没有创建任何伪元素,但仅用于标签之前,它使用
input[type=radio]:checked
显示自定义按钮。
但是如何访问单选按钮来选中或取消选中隐藏的?
最佳答案
这里有两个关键点:
- 无论是否显示,复选框都处于选中状态。仅仅因为它是
style='display: none'
并不意味着它没有被选中或未被选中。 - 复选框的标签(将
for
属性设置为其 id 或在其中定义了input
),单击时将更改复选框的状态,即使该复选框不可见。
因此,基于此,您拥有的是显示的每个复选框的标签,然后是适用于 label
元素的 CSS 规则,该元素直接出现在 input
之后,即:checked
在它之前定义了一个伪元素。通过单击标签,您可以切换不可见的复选框并获得此结果。
关于html - 隐藏的用户如何点击输入字段?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23862134/