css 自定义checkbox多选复选框样式

今天在做项目的时候有需要用到多选框，并且因为ui的关系，需要稍微美化一下多选框，所以找到了实现方法，挺实用的，不需要脚本就能实现。

我这个是用背景图片的原理实现的，如果不喜欢这个样式，直接更换背景图就可以了

 

效果：

 

 

 

Html：

<input type="checkbox"/>
<input type="checkbox"/>
<input type="checkbox"/>

 

css：

input[type="checkbox"] {
-webkit-appearance: none; /*清除复选框默认样式*/
background: #fff url(img/135.png) no-repeat; /*复选框的背景图，就是下图，自己保存下图即可*/
height: 22px; /*高度*/
vertical-align: middle;
width: 22px;
cursor: pointer;
outline: none;
}
input[type="checkbox"]:checked {
background-position: -48px 0;
}

 

图片：