1. 原生的input似乎有点丑,可以利用CSS属性选择器选择不同的状态,模拟出相应的效果。
HTML代码如下:
<label for="test">
<input id="test" type="checkbox">
<span></span>
</label>
CSS代码如下:
label input{
display: none;
}
label span{
display: inline-block;
width: 35px; //根据图片的实际情况设置
height: 35px; //根据图片的实际情况设置
background: url(input.png) 0 -39px;
}
label input:checked + span{
background: url(input.png) -47px -39px;
}
未选中的状态:
选中的状态: