剛在博客園里學習了一種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以上的瀏覽器都可以正常顯示；