模拟单选框或复选框

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

未选中的状态：

选中的状态：