【译】使用Checkbox Hack技术能够作的事

本文首发于：github.com/bigo-fronte… 欢迎关注、转载。

本文由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前端，下期见。