html - css checkbox hack 是如何工作的？

Question

我刚刚遇到了仅使用 css 创建的开关切换按钮。它被称为复选框 hack。

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

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

我试过了，它工作得很好。但我不明白这是如何工作的，因为我们没有点击复选框。

所以我有两个问题

1. 这是如何工作的？

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

Answer 1

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

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

每当您单击标签时，它都会聚焦输入(或者在复选框的情况下，切换它)。

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

通过display: none隐藏复选框可能会导致某些浏览器出现错误行为。只是通过 position: absolute 将其隐藏起来更安全。