css复选框如何破解工作？

Question

我刚刚遇到了仅使用css创建的切换切换按钮.它被称为复选框黑客.

对于那些不知道复选框css hack是什么的人,请在这里阅读

https://css-tricks.com/the-checkbox-hack/

我试了一下,它工作得非常好.但我不明白这是如何工作的,因为我们没有点击复选框.

所以我有2个问题

1. 这是怎么回事？

2. 我尝试了它而不是绝对定位 display: none; 它仍然有效.这种方法有什么缺点吗？

Answer 1

它的工作方式是使用<label>元素.任何输入元素都可以(通常应该)具有标签.您可以通过使用for属性告诉浏览器哪个标签属于哪个标签,参考输入name:

<input name="myName" />
<label for="myName">Label</label>

无论何时单击标签,它都会聚焦输入(或者在复选框的情况下,切换它).

标签和复选框不必彼此靠近.您可以在文档的开头或结尾添加一些隐藏的复选框,并将标签放在页面的任何位置,它们仍然会聚焦输入.

隐藏复选框display: none可能会导致某些浏览器出现错误行为.只是将它从视图中隐藏起来position: absolute更安全.