使用背景图修改radio、checkbox样式

如果觉得设置样式太麻烦，或者页面上选中的样式太复杂，也可以用背景图去修改样式<div class="">    <label><input type="radio" name="1"><i class="spot"></i>123456</label>    <label><input type="radio" name="1"><i class="spot"></i>123456</label></div>

<style>    label{        display:inline-block;        width:200px;        height:50px;        line-height:.8rem;        text-align:left;        position: relative;    }    label input{        width: 15px;        height: 15px;        vertical-align: bottom;        margin-right:.1rem;        opacity: 0;    }    .spot{        display:inline-block;        width:17px;        height:17px;        background:url("image/radio.png") no-repeat;  /*默认的样式图片*/        background-size:16px;        position: absolute;        top:.2rem;        left:0;        z-index:5;    }    input:checked + .spot{        background:url("image/checked.png") no-repeat;  /*选中后的样式图片*/        background-size:16px;    }</style>