1. 這一小節(jié)對(duì)于我來說真的是福音，我一直很苦惱（對(duì)于checkbox）。在我未接觸書本之前，我一直使用默認(rèn)樣式的checkbox，以前嘗試修改它，給它定義寬度什么的都尼瑪沒有效果，這就讓人很頭疼了！

2. 這一小節(jié)練習(xí)的還是偽元素，我們需要實(shí)現(xiàn)以下的checkbox

自定義checkbox

相對(duì)于每個(gè)瀏覽器都不一樣的checkbox，chrome的默認(rèn)樣式還算可以接受

chrome默認(rèn)樣式

小測試

html

<input type="checkbox" id="awesome">
<label for="awesome">Awesome!</label>

第一步：
利用偽元素創(chuàng)建一個(gè)大小類似于原樣式的方塊

css

.checkbox input[type="checkbox"]+label::before{ 
   content: '\a0';  /* non-break-block*/
   display: inline-block;  
   vertical-align: .1em; 
   width: .8em; 
   height: .8em;  
   margin-right: .2em;  
   border-radius: .2em;
   background: silver; 
   text-indent: .15em; 
   line-height: .65em; 
   transition: background .2s;
}

關(guān)于第一行的不換行空格，其實(shí)是個(gè)占位符

  content: '\a0';  /* non-break-block*/

具體想了解不換行空格，可以看看這篇文章，寫的很具體

http://www.cnblogs.com/yjf512/p/3216392.html

效果：

第二步：
現(xiàn)在我們需要用符合可及性的方式來隱藏原來的checkbox,表示我們不能使用display:none,因?yàn)檫@樣會(huì)把它完全從鍵盤Tab鍵里移動(dòng)的順序里移除。所以可以改用這種方式

input[type="checkbox"]{   
  position: absolute;  
  clip: rect(0,0,0,0);
}

效果：

第三步：
設(shè)置checked, focus樣式

.checkbox input[type="checkbox"]:checked + label::before{  
  content: '\2713';    
  background: yellowgreen;
}
.checkbox input[type="checkbox"]:focus + label::before{  
  box-shadow: 0 0 0 1px #58a;
}

checked 狀態(tài)

自定義checkbox完成

利用這個(gè)特性可以制作一些按鈕狀態(tài)（on和off不同的樣式）

no checked

checked

當(dāng)然這樣的效果也可以用自定義屬性（或者改變類）實(shí)現(xiàn)，不過需要一點(diǎn)JS代碼。不過這種純CSS實(shí)現(xiàn)方法更加有趣！