翻译：涂鸦码龙
Checkbox 复选框相当好用，加对 CSS 魔法有奇效。此文旨在展示一些利用 checkbox 实现的有创意的东西，并且文中的例子 没用 JavaScript 哟。
基本配方
从 HTML 着手。
此处无技巧可言。 的 for属性匹配 的 id属性，因此点击 可以控制 复选框。这点尤其重要，因为下一步将隐藏 。
input { position: absolute; left: -9999px;} 为什么不用 display: none？因为屏幕阅读机和键盘 Tab 会忽略它。此方法让 保持在文档流中，但是让它离屏隐藏（超出屏幕可见范围达到隐藏）。
隐藏 以后，我们更容易大展身手。我们仍需传达选中/未选两种状态，但是可以通过 完成。真正的派对开始啦。
input:checked + label { /* 牛X闪闪的样式 */} 我们使用 :checked伪类， 和相邻兄弟元素选择器（ +）的组合达到目的，当复选框选中时，找到紧随其后的 元素，加上想要的样式。还可以利用 中的伪元素（ ::before和 ::after）实现更有创意的想法。
input:checked + label::before { /* 指示器的样式 */} 来，看看实际效果吧。例子用到了以上提及的基本配方，把一个普普通通的复选框改造得当人眼前一亮。
See the Pen Checkbox Trickery: Simple Toggleby Will Boyd ( @lonekorean) on CodePen.
最大的好处是，包含在 中的复选框的值仍然可以被提交。我们只改变了外观，并没有影响功能。
隐藏/显示内容
目前为止，我们都是给 加样式，我们可以更进一步。这个例子会根据用户的选择，动态地隐藏/显示表单的部分内容。
See the Pen Checkbox Trickery: Form Disclosureby Will Boyd ( @lonekorean) on CodePen.
:checked伪类对单选按钮同样奏效，考虑到这一点，“How did you hear about us?”这块的 HTML 用到了单选按钮。
From a friend Somewhere on the internet Other...Please explain
查看更多关于复选框的CSS魔法_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110585