html - 隐藏的用户如何点击输入字段？

Question

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 显示自定义按钮。

但是如何访问单选按钮来选中或取消选中隐藏的？

Answer 1

这里有两个关键点:

1. 无论是否显示，复选框都处于选中状态。仅仅因为它是 style='display: none' 并不意味着它没有被选中或未被选中。
2. 复选框的标签(将 for 属性设置为其 id 或在其中定义了 input)，单击时将更改复选框的状态，即使该复选框不可见。

因此，基于此，您拥有的是显示的每个复选框的标签，然后是适用于 label 元素的 CSS 规则，该元素直接出现在 input 之后，即:checked 在它之前定义了一个伪元素。通过单击标签，您可以切换不可见的复选框并获得此结果。