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;
}
图片: