如何隐藏隐藏用户的输入字段？

Question

css3 :checked如何使用隐藏元素？

我找到了自定义复选框和无线电按钮here is a demo。

首先将隐藏设置为单选按钮：

input[type=radio]{display: none;}

应用:before pseudo元素使标签在标签前显示为单选按钮。

但现在用户检查按钮后，将应用以下css来显示支票。

input[type=radio]:checked + label:before{

所以，现在我的问题是用户可以检查和取消选中单选按钮的方式，示例使用display: none单选按钮，并且没有创建任何伪元素，但仅用于标签之前，它使用 input[type=radio]:checked显示自定义按钮。

但是如何检查或取消选中隐藏的单选按钮？

Answer 1

这里有两个关键点：

1. 复选框具有已检查状态，无论是否显示。仅仅因为它是style='display: none'并不意味着它没有被选中或未选中。
2. 复选框的标签（已将for属性设置为其ID或其中定义了input），点击后，将更改复选框的状态，甚至如果该复选框不可见。

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