自定义复选框
input元素和label标签：label标签为 input 元素定义标注，label标签的for属性应该和input元素的id属性值相同，这样在进行交互时它俩才能相互对应。
一直以来，复选框和单选框这两种空间都难以进行样式的设置。不过，在选择符（第三版）http://w3.org/TR/css3-selectors中，我们得到了一个新的伪类:checked。这个伪类只有在复选框被勾选时才会匹配。
注意，伪类选择符:checked和属性选择符[checked]之间的区别在于：属性选择符不会根据用户的交互行为进行更新，因为用户的交互并不会影响HTML的标签上的属性。
那么我们要如何通过勾选状态来给哪个元素设置样式呢？
其实有一个元素总是跟复选框形影不离，他就是< label >。当它与复选框关联之后，也可以起到触发开关的作用。
因此我们的思路为：我们可以给label添加生成性的内容（伪元素），并基于复选框的状态来为其设置样式。然后，就可以把真正的复选框隐藏起来，再把生成性内容美化一番，用来顶替原来的复选框。
我们从下面的代码开始：
// jade
div.m-200.fs-30
input(type="checkbox" id="awesome")
label(for="awesome") Awesome!
给伪元素加上样式：
input[type="checkbox"] + label::before {
content: '\a0';
display: inline-block;
vertical-align: .2em;
width: .8em;
height: .8em;
margin-left: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65;
}
接下来再给复选框的勾选状态加上不同的样式：
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen;
}
现在，我们需要把原来的复选框以一种不可损失可访问性的方式隐藏起来，这意味着我们不能使用display：none，因为那样会把它从键盘tab键切换焦点的队列中完全删除。我们采用clip（裁剪一个绝对定位元素）来裁剪出一个大小为0的区域：
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
于是现在就变成这样的效果了：
至此，就实现了一个较为完整的优化单选框或复选框的效果，至于怎么优化，就在以后的项目中灵活应用了。
最后要注意一点：尽量避免把复选框设置为圆形，因为大多数用户会把圆形的开关理解为单选框，这个 道理也适用于方形的单选框。
是这样吗？我个人觉得还好，以前也没太注意过，以后留意一下。
另外有一种情况，如果想用一个复选框来实现开关式按钮，可以通过以下代码来实现：
// jade
div.m-200.fs-30
input(type="checkbox" id="awesome")
label(for="awesome") Awesome!
// css
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
input[type="checkbox"] + label {
display: inline-block;
padding: .3em .5em;
background: #ccc;
background-image: linear-gradient(#ddd, #bbb);
border: 1px solid rgba(0,0,0,.2);
border-radius: .3em;
box-shadow: 0 1px #fff inset;
text-align: center;
text-shadow: 0 1px 1px #fff;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:active + label {
box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
border-color: rgba(0,0,0,.3);
background: #bbb;
}
停用时，就是浮起的状态：
启用时，就是按下的状态：
这就是一个开关式按钮。