默認狀態下的復選框：
<input type="checkbox" id="awesome"/>
<label for="awesome">Awesome!</label>
當 <label>元素與復選框關聯之后，可以起到觸發開關的作用。我們可以為它添加生成性的內容（偽元素），并基于復選框的狀態來為其設置樣式。然后再把真正的復選框隱藏起來。
接下來為它添加樣式：
input[type="checkbox"] + label:before {
content:"\a0"; /*不換行空格*/
display:inline-block;
vertical-align:0em;
width:.75em;
height:.75em;
margin-right:.2em;
border-radius:.2em;
background:#ace;
text-indent:.15em;
line-height:.65;
}
復選框和 label 的樣子
現在給復選框的勾選狀態(checked)加上不同的樣式：
input[type="checkbox"]:checked + label:before {
content:"\2713";
background:#fce;
}
checked 狀態
現在，把原來的復選框以一種不損失可訪問性的方式隱藏起來。這意味著不能使用
display：none；因為那樣會把它從鍵盤tab鍵切換焦點的隊列中完全消除。
input[type="checkbox"] {
position:absolute;
clip:rect(0,0,0,0); /*clip 屬性剪裁絕對定位元素。*/
}
也可采用另一個方法：
input[type="checkbox"] {
position:absolute;
left:-9999px; /*讓當前元素跑到頁面外面去*/
}
你還可以繼續優化它，比如在它聚焦或禁用時改變它的樣式，甚至可以用過渡或者動畫來讓各個狀態更加平滑。
參考書籍：Lea Verou《CSS揭秘》
