自定义webkit的滚动条和checkbox

最近在项目中碰到了一个问题：视觉稿中的checkbox和滚动条和webkit自带的样式差距很大。本着原生更省力的原则努力想去说服产品经理和设计师，但是无果，他们搬出了ui规范，必须要做成规范上的样式。虽然很蛋疼，但我也只好把蛋蛋揉了揉开始去自定义这两个货。

思路：首先，去掉webkit自带的appearance；对相应的样式进行重写；替换相应的图片。

1、checkbox篇

代码：

input[type="checkbox"]{-webkit-appearance:none;outline:none;width: 13px;height: 13px;background-image: url(img/slice/ico-checkbox.png);}
input[type="checkbox"]:checked{background-image: url(img/slice/ico-checked.png);}

解读：

上面的代码完成了对checkbox的自定义，我们稍微来看一下。input[type="checkbox"]这个规则选取的是正常情况下的checkbox，好吧，说的有点绕口，也就是说定义了未选中时的样式。而input[type="checkbox"]:checked从它的脸上就看到一行字“感谢CCTV、chanel TV、MTV，我被选中了！”。-webkit-appearance:none;这句代码就是告诉浏览器，“哥们儿，你歇歇吧，我来搞定！”，后面的样式代码设置了checkbox的宽和高以及元素的背景图。因为去掉了webkit自带的表现样式，因此各位看客请注意不要漏了对选中时的checkbox设置背景图，否则，你再也肯不到那个选中的“勾”。正所谓，谁试谁知道，试试泪满眶啊。

2、滚动条篇

代码：

::-webkit-scrollbar{width:11px; height:11px;}

::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px;background-color:rgba(0,0,0,0.4); }

::-webkit-scrollbar-track{background-color:rgba(0,0,0,0.2); -webkit-border-radius:10px;}

::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment{display:block;margin: 5px 0;}
::-webkit-scrollbar-button:vertical:increment{background-image: url(img/slice/arr-down.png);width: 11px;height: 15px;}
::-webkit-scrollbar-button:vertical:decrement{background-image: url(img/slice/arr-up.png);width: 11px;height: 15px;}

相关知识：

::-webkit-scrollbar  滚动条整体部分
::-webkit-scrollbar-button 滚动条两端的按钮
::-webkit-scrollbar-track 外层轨道
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-thumb （滑块）
::-webkit-scrollbar-corner 边角
::-webkit-resizer 定义右下角拖动块的样式

当我们在自定义一个滚动条时，通常会涉及到上面标红的4个伪类，分别对滚动条外轨道、滚动条滑块、滚动条顶部和底部的箭头按钮（这里以垂直方式的滚动条为例）。

在用::-webkit-scrollbar 设置了滚动的宽度以后，浏览器就知道小伙子骨骼清奇准备自己去搞定滚动条的样式啦。当然，这里还是有个坑的，如果你以为只设置一下滚动条的宽度和外轨道及滑块儿的颜色，只能说明你还是太年轻了，滚动条上的箭头的图标消失了...

这里也是磕磕绊绊弄了好久，最后发现原来要设置::-webkit-scrollbar-button这货，它还有incerement和decrement两个伪类，分别表示向上的按钮和向下的按钮，大家根据自己的需要对齐设置相应的背景图片就OK了。具体的可以参考上面的代码，图片请用自己的，代码均是实际项目测试过。