前端工程师和设计师一直都是相爱相杀的两个人。
在拿到UI稿时设计师告诉我要做到99%还原。。。满脸黑线（￣工￣lll）于是乎，就要实现设计师满意的checkbox。以下为实现步骤。
Requirement:
要实现如图所示的checkbox：
Paste_Image.png
Implementation：
-
首先，需要让设计师给你一张如下图所示的png：
checkbox.png
这张图片从左到右依次为，checkbox默认状态、hover状态、选中状态、未选中的disabled状态、选中的disabled状态。
- 接下来就要使用强大的CSS了。
首先给需要个性化的checkbox加上以下样式：
input[type="checkbox"] {
-webkit-appearance: none; //去掉checkbox原有的样式
}
然后利用设计师给的图添加checkbox各种状态所需要的样式：
默认:
input[type="checkbox"] {
-webkit-appearance: none;
background: url("checkbox.png");
height: 16px; //每一个checkbox的高度
vertical-align: middle;
width: 16px; //每一个checkbox的宽度
}
选中：
input[type="checkbox"]:checked {
background-position: -36px 0; //图片相对于当前checkbox向左移16 + 2(间距) + 16px，即为选中样式。
}
未选中：
input[type="checkbox"]:not(:checked) {
background-position: 0 0;
}
未选中hover：
input[type="checkbox"]:not(:checked):hover {
background-position: -18px 0;
}
选中但disabled：
input[type="checkbox"][disabled]:checked {
background-position: -72px 0;
}
其他样式可以自己参考自己设定。 - 兼容性方面：
目前只兼容 Webkit 系列浏览器； Firefox 实现了替代的 -moz-appearance属性，不过控件原有的背景颜色、边框样式无法修改；IE 系列暂时不支持该属性。 - 为了兼容更多的主流浏览器，需要寻求另外的解决方案。
在所有主流浏览器里，点击关联某个复选框的 label 时，产生的效果和点击元素自身相同，会切换复选框控件的选中状态。
既然能用 label 元素来控制复选框的状态，那就不必直接操作实际的复选框元素，而把操作和样式都转移到与之关联的 label 元素上：
<input id="example" type="checkbox">
<label for="example"></label>
确保 label 元素的 for属性的值和复选框 input 的 id值一致，同时将 label 元素放置于 input 之后，这样 CSS 可以通过相邻兄弟选择器定位到这个 label 元素并为之应用样式：
input[type="checkbox"] + label:before {
background: #fff url(i/blue.png);
content: " ";
height: 22px;
left: 0;
position: absolute;
width: 22px;
}
有了样式化的 label 元素来提供交互，原生的 checkbox 控件就显得有点多余了，虽然可以用 display: none把它隐藏掉，不过隐藏后的表单元素是不能获得焦点的，要怎么办呢？
当然，没有什么问题用一个div解决不了的。所以我们做如下修改：
<div class="checkbox">
<input id="exampleCheckbox" type="checkbox">
<label for="exampleCheckbox"></label>
</div>
/* css */
.checkbox {
min-height: 24px;
padding-left: 24px;
position: relative;
}
input[type="checkbox"] {
box-sizing: border-box;
left: 4px;
margin: 0;
padding: 0;
position: absolute;
top: 3px;
}
用一个div将label和input包含在内，并设置div的position为relative，这样就可以调整label和checkbox相对于父div的位置，实现用 label 元素把checkbox遮住，这样既能支持键盘交互，同时当图片加载失败的时候，又能保证原生的控件可用。
这样就可以兼容主流浏览器啦。
有一个iCheck库，可以实现很好看的checkbox样式，详见使用说明－中文。但是要实现各家设计师的样式，还是要自力更生呀。(• ₃ •)
