【译】使用Checkbox Hack技术可以做的事

本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。

本文由bigo前端翻译小组翻译，原文链接：The “Checkbox Hack” (and things you can do with it)

什么是Checkbox Hack

Checkbox Hack技术就是复选框 <input type=“checkbox”>结合<label>标签，通过复选框的选中来控制一些元素的样式，比如：

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

然后你可以通过使用绝对定位或者设置opacity:0，把复选框隐藏起来。虽然复选框已被隐藏，但是你点击<label>标签元素，复选框的选中与否仍然可以被修改。然后，你可以使用相邻的兄弟选择器（~）根据input标签的:checked状态对<div>进行不同的样式设置。

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

因此，你可以完全根据该复选框的状态来设置元素的不同样式，超级简便。下面我们来看下，使用“Checkbox Hack”技术可以做的一些例子。

demo源码

1.自定义单选按钮、复选框样式

demo源码

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

更多资料可参考：

• Pioneered by Ryan Seddon
• Similar by Martin Ivanov
• For use on Wufoo forms by me

2.文件系统，如“树形结构菜单”

demo源码

3.Tab标签页

checkbox hack技术非常适合这种在不同区域之间切换的tab标签页设计模式。使用单选按钮来代替状态独立的复选框，在每个单选按钮中，一次只能启用一个选项卡（例如一次只能激活一个选项卡)。

demo来源：Demo from Functional CSS tabs revisited

4.下拉菜单

demo源码

5.switch开关

可以用<input type="checkbox”>来实现一个表单的ON / OFF切换功能, 就像这个表情符号切换功能例子！

demo源码

或者可以用多个<input type="checkbox">元素实现不同的选项值切换。

在这个MPG计算器例子中，按钮元素均为<input type="radio">类型。

6.FAQ答案揭示

demo源码

这时候, 你可能会想到使用<details>和<summary>组合来实现这个折叠功能，但是利用 checkbox hack也可以实现这个答案区域的展示功能。

7.隐藏侧边栏

demo源码

类似以前的Octopress主题。

欢迎大家留言讨论，祝工作顺利、生活愉快！

我是bigo前端，下期见。