干货－自定义个性化checkbox

前端工程师和设计师一直都是相爱相杀的两个人。

在拿到UI稿时设计师告诉我要做到99%还原。。。满脸黑线（￣工￣lll）于是乎，就要实现设计师满意的checkbox。以下为实现步骤。

Requirement:
要实现如图所示的checkbox：

Paste_Image.png

Implementation：

1. 首先，需要让设计师给你一张如下图所示的png：

   
   checkbox.png
   

   这张图片从左到右依次为，checkbox默认状态、hover状态、选中状态、未选中的disabled状态、选中的disabled状态。

2. 接下来就要使用强大的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;
   }
   其他样式可以自己参考自己设定。
3. 兼容性方面：
   目前只兼容 Webkit 系列浏览器； Firefox 实现了替代的 -moz-appearance属性，不过控件原有的背景颜色、边框样式无法修改；IE 系列暂时不支持该属性。
4. 为了兼容更多的主流浏览器，需要寻求另外的解决方案。
   在所有主流浏览器里，点击关联某个复选框的 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样式，详见使用说明－中文。但是要实现各家设计师的样式，还是要自力更生呀。(• ₃ •)

参考资料