CheckBox的按钮自定义样式

  刚在博客园里学习了一种CheckBox的按钮自定义方法，用于随笔记下来，方便本身之后能够更好的复习；

  一个HTML文档内容为几个CheckBox的HTML文档，内容以下：　  

    <div class="wrap">
      <input type="checkbox" id="checkbox01">
      <label for="checkbox01"></label>

      <input type="checkbox" id="checkbox02">
      <label for="checkbox02"></label>

      <input type="checkbox" id="checkbox03">
      <label for="checkbox03"></label>

    </div>

　而后的css样式为：

.wrap{width:300px;background:#eee;border:2px solid #ddd;}

input[type="checkbox"]{display:hidden;} //把input框隐藏掉，用label来定义新的单选框按钮样式；

label{display:inline-block;width:60px;height:60px;background:url(../images/123.jpg);background-size:100% 100%;background-position:0 0px; -webkit-transition:background 0.5s linear;}

input[type="checkbox"]:checked+label{background-position:0 -60px} //如果点击了单选框，则改变图片的位置，实现单选框样式定义

　而后你想要的一个复选框样式就能够美美哒了，基本上IE9以上的浏览器均可以正常显示；