純CSS+HTML自定義checkbox效果

checkbox應該是一個比較經常使用的html功能了，不過瀏覽器自帶的checkbox每每樣式不怎麼好看，並且不一樣瀏覽器效果也不同。出於美化和統一視覺效果的需求，checkbox的自定義就被提出來了。這裏對實現方法作個總結
<!-- more -->

實現思路

純css實現的主要手段是利用label標籤的模擬功能。label的for屬性能夠關聯一個具體的input元素，即便這個input自己不可被用戶可見，有個與它對應的label後，用戶能夠直接經過和label標籤交互來替代原生的input——而這給咱們的樣式模擬留下了空間。簡而言之就是

隱藏原生input，樣式定義的過程留給label （那爲何不直接改變checkbox的樣式？由於checkbox做爲瀏覽器默認組件，樣式更改上並無label那麼方便，不少屬性對checkbox都是不起做用的，好比background,而label在樣式上基本和div同樣'任人宰割')

而在選擇事件上，因爲css的「相鄰選擇符(E+F)」的存在，讓咱們能夠直接利用html的默認checkbox，免去了js模擬選擇的麻煩。

demo

DEMO的部分CSS3屬性只寫了webkit前綴，因此建議用webkit內核的瀏覽器查看本頁
HTML代碼：

<div class="wrap">
    <!-- `input`的id必須有，這個是label進行元素匹配所必需的 -->
    <!-- 能夠看到每一個input的id和label的「for」屬性對應同一字符串 -->
<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>

<input type="checkbox" id="checkbox04" />
<label for="checkbox04"></label>

HTML構建完成，接下來是對應的css。

.wrap {
  width: 500px;
  background-color: #EEE;
  border: 2px solid #DEF;
}

/* 隱藏全部checkbox */
input[type='checkbox'] {
  display: none;
}

/* 對label進行模擬.背景圖片隨便拼湊的，不要吐槽品味*/
/*   transition效果是作個背景切換效果，這裏單純演示而已，實際上這個過渡不加更天然*/
label {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: relative;
  background: url(//www.chitanda.me/images/blank.png);
  background-position: 0 0px;
  -webkit-transition: background 0.5s linear;
}

/*  利用相鄰選擇符和checkbox`:checked`的狀態僞類來模擬默認選中效果（就是點擊後那個勾號的效果）  */
/*若是這段代碼註釋，點擊後將沒有任何反饋給用戶*/
/*由於label自己是沒有點擊後被選中的狀態的，checkbox被隱藏後，這個狀態只能手動模擬*/
input[type='checkbox']:checked+label {
  background-position: 0 -60px;
}

上面代碼的效果以下所示，看起來好像也能夠了。
http://codepen.io/chitanda/pen/OVjarB/

不過仔細想一想，貌似缺了點什麼：選項對應的提示文字
對css不瞭解的新人可能這時候第一反應就是在label後面用p標籤或者span標籤來添加文字。不過這種方式都不怎麼優雅。我的建議用css的::before和::after僞元素（::before和:before是一個東西。不過爲了把「僞元素」和「僞類」區分出來，W3C建議的寫法是僞元素用::而僞類用:）
僞元素的具體內容這裏很少說，(實際上是我也對它們的掌握就僅限於用用而已，對這個談不上理解，就不誤人子弟了)

/* 僞元素的生效很簡單，定義`content`就好，其他的屬性和普通div同樣 */
label::after {
   content: attr(data-name);
   /*利用attr能夠減小css代碼量,data-name寫在html部分的label屬性裏*/
  display: inline-block;
  position: relative;
  width: 120px;
  height: 60px;
  left: 100%;
  vertical-align: middle;
  margin: 10px;
}

最終效果以下：
http://codepen.io/chitanda/pen/KpvRWz/

固然既然能夠用::after模擬label的文字，那也就能夠用::before模擬label的checkbox樣式，這裏就不作解析了，貼個我以前的demo,有興趣的能夠本身作下：
http://codepen.io/chitanda/pen/XbNBKE/