“复选框黑客”（以及可以用它做的事情）

“复选框黑客”是指使用关联的 <label> 和 <input type="checkbox">，通常还包括 另一个元素，用于试图控制它，如下所示

<label for="toggle">Do Something</label>
<input type="checkbox" id="toggle">
<div class="control-me">Control me</div>

然后使用 CSS 将复选框完全隐藏。可能是通过使用绝对定位将其从页面中移除，或者将其不透明度设置为零。但是，即使复选框被隐藏，单击 <label> 仍然会使其值在打开和关闭之间切换。然后，您可以使用相邻兄弟选择器根据输入的 :checked 状态对 <div> 进行不同的样式设置。

.control-me {
  /* Default state */
}
#toggle:checked ~ .control-me {
  /* A toggled state! No JavaScript! */
}

因此，您可以根据该复选框的状态（您甚至看不到）对元素进行完全不同的样式设置。很酷。让我们看一下“复选框黑客”可以做的一些事情。

查看笔
复选框黑客 by Chris Coyier (@chriscoyier)
在 CodePen 上。

其中一些东西超出了您“应该”使用 CSS 进行的操作的界限，并引入了一些有问题的语义。它仍然非常有趣，而且它可以实现，但总的来说，功能行为应该由 JavaScript 控制。

自定义设计的单选按钮和复选框

查看笔
仅使用 CSS 的自定义复选框 by Geoffrey Crofte (@GeoffreyCrofte)
在 CodePen 上。

您可以隐藏单选按钮或复选框的默认 UI，并在其顶部显示自定义版本。

• 由 Ryan Seddon 开创
• Martin Ivanov 类似
• 由我用于 Wufoo 表单

类似文件系统的“树形菜单”

选项卡区域

“选项卡”设计模式只是打开和关闭区域，非常适合复选框黑客。但是，与任何复选框都可以独立于彼此打开或关闭的复选框不同，这些选项卡使用单选按钮，其中每组中只有一个可以打开（就像一次只能激活一个选项卡一样）。

演示来自 重新审视功能性 CSS 选项卡

查看笔
功能性 CSS 选项卡 by Chris Coyier (@chriscoyier)
在 CodePen 上。

下拉菜单

查看笔
单选按钮下拉菜单 by Chris Coyier (@chriscoyier)
在 CodePen 上。

推动切换

切换可以采用 ON/OFF 的形式，这可以通过一个 <input type="checkbox"> 来完成。就像 表情符号切换 一样！

查看笔
CSS 复选框切换开关 by Chris Coyier (@chriscoyier)
在 CodePen 上。

或者它可以是多个 <input type="checkbox"> 元素，在不同的独立值之间切换。

常见问题解答答案揭示

您现在可能只是使用 <details>/<summary> 组合，但可以使用复选框黑客完成可扩展部分。

查看笔
没有 Details/Summary 的常见问题解答（复选框黑客） by Chris Coyier (@chriscoyier)
在 CodePen 上。

隐藏边栏

就像老式的 Octopress 主题。

查看笔
使用复选框黑客隐藏边栏 by Chris Coyier (@chriscoyier)
在 CodePen 上。