自定义checkbox和radio原理上是一样的,定义一个元素或者在:after/befault中从新定义样式盖住原始样式,用伪类只需要处理style样式就行,用label的话可以给checkbox设置overflow:hidden;但是再不能使用label的其他功能了,如果用标签的话需要定义函数来改变checkbox的distabled,总的来说各有各的优点
<input id="c" checked="true" type="checkbox"/>
//S自定义ckeckbox
input[type=checkbox] {
width:30px;
height:30px;
position: relative;
}
input[type=checkbox]:after {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
content: " ";
background: url(../../../assets/imgs/doctor-checkbok.png) no-repeat center;
background-size: contain;
}
input[type=checkbox]:checked:after {
content: " ";
background: url(../../../assets/imgs/doctor-checkbok-ed.png) no-repeat center;
background-size: contain;
}
//N自定义ckeckbox