純CSS改變CheckBox樣式

由於HTML自帶的CheckBox的樣式很醜，好多時候我們需要自己改變其樣式，尤其是要開發移動網頁的時候更是要將其改變成類似於app的開頭式按鈕，下面來說一下怎樣不通過js，單純的利用css來達到效果。

完成效果：

html代碼結構：

將check的框調到最左邊，並且隱藏

.ckbClass {  
  display: none;
  float: left;
}

將checkbox的label設置成關閉時所要顯示的圖片

.ckbClassOff {
  background-image: url(/img/ckb_off.png);
  background-size: 57px;
  background-position: right center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  min-height: 32px;
  position: absolute;
  right: 0;
  top: 3px;
  width: 57px;
}

將checkbox選中狀態時的label設置成打開時所要顯示的圖片

.mailSettingSwitch input[type="checkbox"]:checked + label {
  background-image: url(/img/ckb_on.png);
}

兩個注意點：

1，label中的for屬性一定要指定到正確的checkbox上。

2，如果用chrome模擬手機調試，checkbox的選中狀態不會實時顯示。（43.0.2357.124版）