不知道小夥伴們在使用複選框(checkbox)的時候有沒有覺得默認的樣式實在太醜了，自己想換一個好看點的樣式又感覺挺麻煩的，前幾天博主就遇到了這個麻煩，然後翻閱了書籍找到了解決方法，現在和大家分享一下
我們先看一下複選框的默認樣式，這種默認的複選框樣式還是不夠美觀的，那麼下面我們把它美化一下
有一個元素和複選框是形影不離、息息相關的，那就是<label>，當<label>元素和複選框關聯之後，也可以起到觸發開關的作用
我們可以爲label添加僞元素，並基於複選框的狀態來爲其設置樣式，然後就可以把真正的複選框隱藏起來，再把僞元素的內容進行美化，用來頂替原來的複選框~
從下面一段代碼開始：
<input type="checkbox" id="check-box" />
<label for="check-box">哈哈哈哈</label>
然後我們在label的前面生成一個僞元素，作爲美化版的複選框，並加上樣式：
input[type="checkbox"] + label::before {
content: '\a0'; /* 不換行空格 */
display: inline-block;
vertical-align: .1em;
width: .8em;
height: .8em;
margin-right: .2em;
border-radius: .2em;
background: silver;
text-indent: .15em;
line-height: .65; }
現在的頁面是這樣的：
現在可以看見那個僞元素了，複選框仍然可見，我們等一下把它隱藏，我們先給複選框的勾選狀態加上不同的樣式：
input[type="checkbox"]:checked + label::before {
content: '\2713';
background: yellowgreen; }
正如上圖所示，現在樣式已經出來了，我們再將原來的複選框隱藏掉，注意不能使用display:none來隱藏，因爲那樣會
把它從鍵盤tab鍵切換焦點的隊列中完全刪除，我們用下面的方法來隱藏：
input[type="checkbox"] {
position: absolute;
clip: rect(0,0,0,0);
}
clip屬性對元素進行裁剪，這裏我們把複選框全部裁剪掉，不瞭解用法的小朋友可以自行查閱~
現在就得到下面的樣式啦：
我們還可以進行進一步的優化，比如在聚焦或者禁用的時候改變它的樣式：
input[type="checkbox"]:focus + label::before {
box-shadow: 0 0 .1em .1em #58a; }
input[type="checkbox"]:disabled + label::before {
background: gray;
box-shadow: none;
color: #555; }