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;
}

 

圖片：