input checkbox样式美化

html代码

<label><input type="checkbox"><span></span></label>

css代码

input[type="checkbox"]{
      appearance: none; 
      -webkit-appearance: none;
      outline: none;
      display:none;
}
label{
      width:100px;
      height:100px;
      display:inline-block;
      cursor:pointer;
}
label input[type="checkbox"] +span{
    width:20px;
    height:20px;
    display:inline-block;
    background:url(http://sandbox.runjs.cn/uploads/rs/216/0y89g/checkbox_01.gif)  no-repeat;
    background-position:0 0;
}
label input[type="checkbox"]:checked + span{
      background-position:0 -21px
}