css 复选框破解是如何工作的？

Question

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

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

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

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

所以我有 2 个问题

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

Answer 1

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

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

只要您单击标签，它就会聚焦输入（或者在复选框的情况下，切换它）。

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

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

Answer 2

您可以使用 for= 属性将 label 绑定到 checkboxes/radios。设置后，单击标签会切换复选框。这是一个standard HTML attribute.
您可以使用显示隐藏复选框：none，但请对其进行测试以确保其值仍随表单一起提交。

Answer 3

除display: none;外，您还可以使用visibility: hidden;或opacity: 0;隐藏复选框，但我不确定哪个更好。

Answer 4

CSS 知道复选框的当前 checked 状态输入

这种意识，结合兄弟姐妹选择器，例如 + （直接下一个兄弟姐妹） 和 ~ （某处的下一个兄弟姐妹) 允许为 checked/unchecked 状态设置不同的样式到 input 元素之后的任何内容。这里的关键是“后”字。

基本示例：

/* styles when checkbox is unchecked */
div{ border:2px solid blue; margin:10px }
div h3{ color:red; }


/* when checkbox is checked */
input:checked ~ div{ background:blue; }
input:checked ~ div h3{ color:gold; }

<input type=checkbox>

<div><h3>very<h3></div>
<div><h3>cool<h3></div>

正如其他人所说（但不是必须的） - HTML label 元素允许与 input 元素交互，在 checkbox/radio 类型的情况下 -它允许通过单击标签本身来切换它们的 checked 状态，标签本身通过 for 属性“链接”到特定的 input 元素：

<label for='x`>click</label>

和 id 属性没有链接的输入：

<input type='checkbox' id='x'>

为了使该方法起作用，输入元素必须放置在之前它打算通过其控制的任何元素CSS.

在实际用例中，人们通常想在下一个兄弟姐妹上使用复选框的 CSS 切换功能，但为了掩盖涉及复选框的事实。 The best way is by applying the hidden input 上的属性，它只关闭输入的渲染，没有别的。

下面的示例展示了一个简单的 accordion 组件的此类用例：

实际例子：手风琴

.accordion{ width: 300px; border: 1px solid silver; }
.accordion label{ display:block; padding:1em; cursor:pointer; }
.accordion label:hover{ color:red; } 

.accordion > div:not(:last-child){ border-bottom:1px solid silver; }
.accordion .more{ max-height:0; transition:.5s; color:green; padding:0 1em; overflow: hidden; }

/* checked toggled */
.accordion input:checked + .content{ background:#EEE; }
.accordion input:checked + .content .more{ max-height:200px; }

<div class='accordion'>
  <div>
    <input type='checkbox' id='checkbox_item_1' hidden>
    <div class='content'>
      <label for='checkbox_item_1'>Title 1</label>
      <div class='more'>
        <p>This is cool<p>
        <p>Yes it is</p>
      </div>
    </div>
  </div>

  <div>
    <input type='checkbox' id='checkbox_item_2' hidden>
    <div class='content'>
      <label for='checkbox_item_2'>Title 2</label>
      <div class='more'>
        <p>This is also cool</p>
        <p>So much fun</p>
      </div>
    </div>
  </div>
</div>

css 复选框破解是如何工作的？

How does css checkbox hack work?

html

css

checkbox

CSS 知道复选框的当前 checked 状态输入

基本示例：

实际例子：手风琴

css 复选框破解是如何工作的？

How does css checkbox hack work?

html

css

checkbox

CSS 知道 复选框的当前 checked 状态输入

基本示例：

实际例子：手风琴

CSS 知道复选框的当前 checked 状态输入