CSS复选框黑客如何工作？答案

【问题标题】：How does css checkbox hack work?CSS复选框黑客如何工作？
【发布时间】：2015-07-09 02:59:55
【问题描述】：

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

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

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

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

所以我有两个问题

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

【问题讨论】：

我在 iOS 上看到过，新的复选框图像不会显示更改后的值。因此，当您单击它时，该值更改为未选中，但用户查看了一个选中的按钮，看起来好像什么都没发生。
你没听说过<label>标签吗？
我解决这个问题的方法是从字面上隐藏和显示您单击的任何复选框。这使得 iOS 重新渲染复选框。
@NiettheDarkAbsol l.. 我听说了.. 你能解释一下这两者之间的联系吗？
<label> 允许您定义一个可以单击以触发for 引用的元素或其中的复选框的事物。一个基本的例子是<label><input type="checkbox" /> You can click this text!</label>。

标签： html css checkbox

【解决方案1】：

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

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

当你点击标签时，它会聚焦输入（或者在复选框的情况下，切换它）。

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

这种意识，结合兄弟选择器，例如+ （立即下一个兄弟） 和~ （在某处的下一个兄弟） 允许不同的样式样式，对于选中/未选中状态，到 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 是通过在input 上应用hidden 属性，它只关闭输入的呈现，没有别的。

下面的例子展示了一个简单的 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>

【讨论】：

【解决方案4】：

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

【讨论】：