CSS复选框hack是如何工作的？

Question

我刚刚发现了只使用CSS创建的开关切换按钮。它被称为复选框Hack。

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

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

我尝试了一下，它完美地运行了。但我不明白这是如何工作的，因为我们没有点击复选框。

所以我有两个问题：

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

- Konza

---

我曾经在iOS上见过这种情况，新的复选框图像不会显示已更改的值。因此，当您单击它时，该值将更改为未选中，但用户看到的是一个看起来没有发生任何事情的已选按钮。 - James McDonnell

你从来没有听说过 <label> 标签吗？ - Niet the Dark Absol

我解决这个问题的方法是在你点击任何复选框时，实际上隐藏和显示它们。这样可以让iOS重新渲染复选框。 - James McDonnell

@NiettheDarkAbsol，我听说了...您能解释一下这两者之间的联系吗？ - Konza

<label> 允许您定义一个可以点击的东西，以触发 for 引用的元素或其中的复选框。一个基本的例子是 <label><input type="checkbox" /> 您可以单击此文本！</label>。 - Niet the Dark Absol

<label> 标签在你提供的文章中已经明确提到了... - codyogden

Answer 1

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

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

无论何时单击标签，它都会将输入框聚焦（或在复选框的情况下切换它）。

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

通过`display: none`隐藏复选框可能会导致某些浏览器出现错误行为。仅通过`position: absolute`将其隐藏以供查看更加安全。

- Stephan Muller

Answer 2

1. 您可以使用for=属性将标签绑定到 / 上。设置后，单击标签可切换复选框/单选按钮。这是一个标准HTML属性。

2. 您可以使用display：none隐藏复选框，但请测试以确保其值仍随表单提交。

- Chris Berkompas

Answer 3

CSS能够意识到复选框输入的当前选中状态。
这种意识，结合兄弟选择器例如+（紧接着的下一个兄弟）和~（下一个兄弟在其他地方），可以使得对于选中/未选中状态，样式应用到输入框之后的任何元素。关键在于“之后”这个词。

基本示例：

/* 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 元素交互，在复选框/单选框类型的情况下，它允许通过单击标签本身来切换它们的 checked 状态，该标签通过 for 属性与特定的 input 元素“链接”：

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

并且链接的输入框中有 id 属性：

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

为了使该方法生效，输入元素必须放置在其所控制的任何元素之前之前，以便通过CSS进行控制。

在实际应用中，人们经常希望使用复选框的CSS切换功能来控制下一个兄弟节点，但是要隐藏复选框的存在。 最好的方法是在input上应用hidden属性，这只会切换输入的呈现，而不会影响其他内容。

下面的示例展示了一个简单的手风琴组件的使用情况：

实际示例：手风琴

.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>

- vsync

Answer 4

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

- Luis Simosa