复选框的 CSS 魔法
原文： Checkbox Trickery with CSS
翻译：涂鸦码龙
Checkbox 复选框相当好用，加对 CSS 魔法有奇效。此文旨在展示一些利用 checkbox 实现的有创意的东西，并且文中的例子 没用 JavaScript 哟。
基本配方
从 HTML 着手。
<input id="toggle" type="checkbox"> <label for="toggle">
此处无技巧可言。 <label> 的 for 属性匹配 <input> 的 id 属性，因此点击 <label> 可以控制 <input> 复选框。这点尤其重要，因为下一步将隐藏 <input> 。
input { position: absolute; left: -9999px; }为什么不用 display: none ？因为屏幕阅读机和键盘 Tab 会忽略它。此方法让 <input> 保持在文档流中，但是让它离屏隐藏（超出屏幕可见范围达到隐藏）。
隐藏 <input> 以后，我们更容易大展身手。我们仍需传达选中/未选两种状态，但是可以通过 <label> 完成。真正的派对开始啦。
input:checked + label { /* 牛X闪闪的样式 */ }我们使用 :checked 伪类， 和相邻兄弟元素选择器（ + ）的组合达到目的，当复选框选中时，找到紧随其后的 <label> 元素，加上想要的样式。还可以利用 <label> 中的伪元素（ ::before 和 ::after ）实现更有创意的想法。
input:checked + label::before { /* 指示器的样式 */ }来，看看实际效果吧。例子用到了以上提及的基本配方，把一个普普通通的复选框改造得当人眼前一亮。
See the Pen Checkbox Trickery: Simple Toggle by Will Boyd ( @lonekorean ) on CodePen .
最大的好处是，包含在 <form> 中的复选框的值仍然可以被提交。我们只改变了外观，并没有影响功能。
隐藏/显示内容
目前为止，我们都是给 <label> 加样式，我们可以更进一步。这个例子会根据用户的选择，动态地隐藏/显示表单的部分内容。
See the Pen Checkbox Trickery: Form Disclosure by Will Boyd ( @lonekorean ) on CodePen .
:checked 伪类对单选按钮同样奏效，考虑到这一点，“How did you hear about us?”这块的 HTML 用到了单选按钮。
<input id="how-friend" name="how" type="radio"> <label for="how-friend" class="side-label">From a friend</label> <input id="how-internet" name="how" type="radio"> <label for="how-internet" class="side-label">Somewhere on the internet</label> <input id="how-other" name="how" type="radio"> <label for="how-other" class="side-label">Other...</label> <div class="how-other-disclosure"> <label for="how-other-explain" class="top-label">Please explain</label> <textarea id="how-other-explain"></textarea> </div>
单选按钮指示器利用 <label> 内的 ::before 伪元素（外部的圆环）和 ::after 伪元素（内部的绿点）实现，当单选按钮选中 / 未选时显示 / 隐藏 ::after 伪元素相当简单。
.side-label::after { display: none; /* 其它样式 */ } input:checked + .side-label::after { display: block; }<div> 一直隐藏，直到“Other…”单选按钮选中时才显示。我使用了 display: none 隐藏 <div> ，因为这次我确实想让屏幕阅读器和键盘 Tab 在内容隐藏时忽略它。当单选按钮选中时，利用 CSS 显示 <div> 。
#how-other:checked ~ .how-other-disclosure { display: block; }之前我们一直使用相邻兄弟选择器（ + ），不过这次得用一般兄弟选择器（ ~ ）。它俩很相似，但是可以找到非相邻的兄弟元素，比如我们的 <div> 。
树状文件夹
我们可以活用之前例子中的技巧，实现一个树状文件夹组件，同样具备隐藏 / 显示两种功能。
See the Pen Checkbox Trickery: Folder Tree by Will Boyd ( @lonekorean ) on CodePen .
单个文件夹的 HTML 如下： <label> 是文件夹，两个 <a> 元素是文件夹里的文件。
<div> <input id="n-1" type="checkbox"> <label for="n-1">Blue</label> <div class="sub"> <a href="#link">Mana Leak</a> <a href="#link">Time Warp</a> </div> </div>
Font Awesome 图标用于表示选中（打开）和未选（关闭）状态。
label::before, a::before { display: block; position: absolute; top: 6px; left: -25px; font-family: 'FontAwesome'; } label::before { content: '\f07b'; /* closed folder */ } input:checked + label::before { content: '\f07c'; /* open folder */ } a::before { content: '\f068'; /* dash */ }文件夹里的内容通过一般兄弟选择器（ ~ ）实现显示 / 隐藏。这就是 HTML 外面包裹额外 <div> 的原因，为了确保选择器能够选到元素，打开兄弟文件夹。
input:checked ~ .sub { display: block; }理所当然，文件夹可以嵌套。只需把另一个文件夹的 HTML 放入 <div class="sub"> 即可。点击 “Multicolor”看看效果吧。
最后，我们聊一下重置按钮。
<input type="reset" value="Collapse All">
表单的重置按钮很少有人用，不过这里巧用了一下。点击重置按钮，所有复选框恢复成初始的未选中状态，关闭了所有文件夹。有意思吧。
Split List（分隔列表）
这个例子依据已做或未做，把列表选项分成两部分。
See the Pen Checkbox Trickery: To-Do List by Will Boyd ( @lonekorean ) on CodePen .
HTML 像这样：
<div class="items"> <input id="item1" type="checkbox" checked> <label for="item1">Create a to-do list</label> <!-- more items --> <h2 class="done" aria-hidden="true">Done</h2> <h2 class="undone" aria-hidden="true">Not Done</h2> </div>
分隔列表是由 CSS flexbox 实现的，这是关键的 CSS。
.items { display: flex; flex-direction: column; } .done { order: 1; } input:checked + label { order: 2; } .undone { order: 3; } label { order: 4; }CSS flexbox 可以使用 order 属性重排元素。当复选框选中的时候， <label> 的 order 值由 4 变为 2 ，列表选项就从 “Not Done” <h2> 下面移到了 “Done” <h2> 下面。
不幸的是，键盘导航和 许多屏幕阅读器 会遵循元素在 DOM 中的顺序，即使它们被 CSS flexbox 做了视觉上的重排。这就导致 “Done”和“Not Done”的标题对于屏幕阅读器无用，这便是我给它们加了 aria-hidden="true" 的原因 —— 被忽略总比引起混淆强。此外，通过键盘和屏幕阅读器完全可以控制分隔列表，正确显示列表项的状态（选中 / 未选）。
如果你对“Done”和“Not Done”其后的计数实现感到好奇，它们用到了 CSS counters。想深入学习的话，可以看 这篇文章 。
分组筛选
压轴的例子展示了如何根据筛选条件，高亮显示交叉区域的数据。
See the Pen Checkbox Trickery: Group Filter by Will Boyd ( @lonekorean ) on CodePen .
这是简短的 HTML 。注意一下 data-teams 属性是由空格分隔的列表，它们每一项恰恰与单选按钮的 id 属性一致。我就是这么把角色跟队伍匹配起来的。
<input id="original" type="radio" name="team" checked> <label for="original">Original X-Men</label> <!-- 省略更多团队 --> <br> <ul class="characters"> <li id="angel" data-teams="original force factor hellfire"> <h2>Angel</h2> <img src="ct-angel.png" alt=""> </li> <!-- 省略更多角色 --> </ul>
关于可访问性，我使用了空的 alt 属性，因为角色的名字已显示在 <h2> 标签中了 —— 每个名字读两次也没有必要。此外，我没有真正的隐藏 <img> 元素（只是收缩和渐隐），屏幕阅读器可以轻易的跳过未高亮的角色。我仅仅需要隐藏 <h2> 。
当选择团队的时候，高亮对应的角色，CSS 是这么实现的。
#original:checked ~ .characters [data-teams~="original"] h2, #force:checked ~ .characters [data-teams~="force"] h2, #factor:checked ~ .characters [data-teams~="factor"] h2, #hellfire:checked ~ .characters [data-teams~="hellfire"] h2 { /* styles to show character name */ } #original:checked ~ .characters [data-teams~="original"] img, #force:checked ~ .characters [data-teams~="force"] img, #factor:checked ~ .characters [data-teams~="factor"] img, #hellfire:checked ~ .characters [data-teams~="hellfire"] img { /* styles to show character avatar */ }我清楚这些选择器看起来有点吓人，不过也不赖。我们来仔细分析下例子的第一行（译者注：以 CSS 中最长的选择器开始算）。当 id 为 ‘original’ 的元素被选中时，找到角色元素里面 data-teams 属性包含 ‘original’ 的元素，然后找到它里面的 <h2> 。2-4行的 ‘force’, ‘factor’, 和 ‘hellfire’ 重复上一步。8-11行继续重复上一步，只不过把 <h2> 换成了 <img> 。
综述
我希望你跟我一样从这些例子中找到了一些乐趣。通过复选框去实现一些好玩的东西，对我而言非常有趣。我并没有排斥在适当的时候使用 JavaScript ，但是没用它也可以实现这么多东西，也是蛮开心的。谢谢阅读！
</div>来自： http://jinlong.github.io/2016/01/14/checkbox-trickery-with-css/