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以上的瀏覽器均可以正常顯示；