单选/复选框是 Web 应用常用控件，随处可见，原生的单/复选框控件的外观一般都不怎么美观，有些时候，原生的控件模样并不能满足设计要求，这时需要更为精致的控件样式，我们更希望其样式可以允许自定义。
CSS3 新增了一个伪类选择器 :checked，用于选择被勾选的单/复选框，利用该选择器可以分别为未选中和选中状态的单/复选框应用不同的样式，怎么给它应用样式呢？直接修改单/复选框的样式比较困难，不过可以使用一些其它方法来实现。
单选/复选框作为一个表单控件，可以使用一个 <label> 元素与之关联，将 <label> 元素的 for 属性指向复选框的 id 属性，这里使用一个复选框来举例说明：
<input id="example-checkbox" type="checkbox">
<label for="example-checkbox">Check</label>
此时，每次点击这个 <label> 元素会发现复选框的选择状态也会变化，测试表明，点击关联某个单/复选框的 <label> 时，产生的效果和点击单/复选框自身相同。然后，因为 <label> 元素紧邻在单/复选框之后，通过组合使用相邻元素选择器（Adjacent sibling selector），我们可以把相应的样式应用到 <label> 元素上去，相比较而言，给 <label> 元素应用样式要比给原生的单/复选框应用样式简单多了。
相邻元素选择器，在两个选择器中间添加一个加号，像这样 selector1 + selector2，表示选择 selector1 元素之后紧邻的 selector2 元素：
input[type="checkbox"] + label {
/* 未选中状态 */
}
input[type="checkbox"]:checked + label {
/* 选中状态 */
}
为了不对 <label> 元素自身的样式造成影响，这里使用生成内容伪元素(::before/::after)来应用单/复选框的自定义样式，首先使用 ::before 伪元素来生成复选框的外框样式：
input[type="checkbox"] + label::before {
background-color: #fff;
border: 1px solid #50a7f8;
border-radius: 3px;
content: " 0a0";
height: 13px;
left: 0;
position: absolute;
13px;
}
然后使用 ::after 伪元素来生成复选框中间的勾的样式，用一个矩形只应用左边框和下边框，然后逆时针旋转 45 度即可做成一个简单的勾形：
input[type="checkbox"] + label::after {
background: transparent;
border: 0 solid #50a7f8;
border- 0 0 3px 3px;
content: " 0a0";
height: 3px;
left: 3px;
position: absolute;
top: 3px;
transform: scale(0) rotate(-45deg);
transition: transform 0.2s linear;
6px;
}
为了在没有勾选的时候不显示这个勾，这里用 transform: scale(0) 来隐藏了这个勾，当复选框被勾选的时候才显示出来：
input[type="checkbox"]:checked + label::after {
transform: scale(1) rotate(-45deg);
}
这里使用了绝对定位，所以给 <label> 元素增加一个相对定位，并在左边预留一定的空间：
input[type="checkbox"] + label {
min-height: 20px;
padding-left: 20px;
position: relative;
}
原生的控件可以把它隐藏掉了：
input[type="checkbox"] {
display: none;
}
不过这样隐藏后就不能通过 Tab 键来与控件交互了，所以可以用另外的方法来隐藏控件，比如设置不透明度为 0：
input[type="checkbox"] {
opacity: 0;
position: absolute;
}
进一步，可以定义控件获取焦点时以及控件禁用时的样式：
input[type="checkbox"]:focus + label::before {
outline: 1px dotted #aaa;
}
input[type="checkbox"]:disabled + label::before {
background-color: #eee;
border-color: #aaa;
}
input[type="checkbox"]:disabled + label::after {
border-color: #aaa;
}
更进一步，给勾选添加过渡效果：
input[type="checkbox"] + label::after {
transition: transform 0.2s linear;
}
单选框
和复选框一样，只是把自定义样式中的外框换成圆形外框，内部的勾换成一个实心圆：
<input id="example-radio" type="radio">
<label for="example-radio">Check</label>
HTML 结构是一样，样式也是类似：
input[type="radio"] {
opacity: 0;
position: absolute;
}
input[type="radio"] + label {
min-height: 20px;
padding-left: 20px;
position: relative;
}
input[type="radio"] + label::before {
background-color: #fff;
border: 1px solid #50a7f8;
border-radius: 50%;
content: " 0a0";
height: 13px;
left: 0;
position: absolute;
top: 0;
13px;
}
input[type="radio"] + label::after {
background: #50a7f8;
border-radius: 50%;
content: " 0a0";
height: 9px;
left: 3px;
position: absolute;
top: 3px;
transform: scale(0);
transition: transform .2s linear;
9px;
}
input[type="radio"]:checked + label::after {
transform: scale(1);
}
input[type="radio"]:focus + label::before {
outline: 1px dotted #aaa;
}
input[type="radio"]:disabled + label::before {
background-color: #eee;
border-color: #aaa;
}
input[type="radio"]:disabled + label::after {
background-color: #aaa;
}
这篇文章里用到了很多种类的选择器，详情可以参考Selectors Level 3
我将这篇文章里涉及到的内容整合成了一个插件，Radio 欢迎吐槽。