CSS---checkbox美化，ios風格的開關按鈕

這段時間工作的新需求，是做一個類似IOS開關按鈕。用來顯示是否選中。
如：
默認未選中

默認選中

---

方法一：

CSS中通過:before、:after僞類美化checkbox按鈕，來實現；

HTML:<input type="checkbox" class="check-switch check-switch-anim"/>

通過設置appearance屬性值賦值爲none;清楚原有checkbox的瀏覽器默認樣式
注意：
所有主流瀏覽器都不支持 appearance 屬性。
Firefox 支持替代的 -moz-appearance 屬性。
Safari 和 Chrome 支持替代的 -webkit-appearance 屬性。
IE各版本是徹底的不支持，沒有替代屬性。

CSS:
.check-switch {
  // 清除原有樣式
  -moz-appearance: none;
  -webkit-appearance: none;
  // 清除元素外邊款輪廓線
  outline: none; 
  // 設置具備區塊元素屬性
  display: inline-block;
  // 按鈕設置爲手型
  cursor:pointer;
  // 設置寬度
  width: 39px;
  // 設置高度
  height: 20px;
  position: relative;
  // 邊框
  border: 1px solid #dfdfdf;
  // 背景
  background-color: #fdfdfd;
  // 設置陰影效果
  box-shadow: #dfdfdf 0 0 0 0 inset;
  // 圓角
  border-radius: 20px;
  // 設置背景的繪製區域
  background-clip: content-box;
}
// 中間圓圈樣式
.check-switch:before {
    // content 屬性與 :before 及 :after 僞元素配合使用，來插入生成內容。
    // 此元素值爲'' ,但是必須存在，否則將不顯示中間那個圓圈
    content: '';
    width: 17px;
    height: 17px;
    // 脫離文檔流
    position: absolute;
    // 設置位置
    top: 0px;
    left: 0;
    // 圓角
    border-radius: 20px;
    // 顏色
    background-color: #fff;
    // 陰影效果
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 
}
//checkbox元素被選中時的樣式
.check-switch:checked {
    // 邊框顏色
    border-color: #64bd63;
    // 選中後的陰影效果
    box-shadow: #64bd63 0 0 0 16px inset;
    // 選中後的北京色
    background-color: #64bd63; 
}
// 在checkbox選中後，中間圓圈的便宜位置
.check-switch:checked:before {
  left: 21px; 
}
// 增加動畫效果
.check-switch-anim {
    transition: border cubic-bezier(0, 0, 0, 1) 0.4s, box-shadow cubic-bezier(0, 0, 0, 1) 0.4s; 
}
.check-switch-anim:before {
      transition: left 0.3s; 
}
.check-switch-anim:checked {
      box-shadow: #3C92DC 0 0 0 16px inset;
      background-color: #3C92DC;
      transition: border ease 0.4s, box-shadow ease 0.4s, background-color ease 1.2s; 
}
.check-switch-anim:checked:before {
        transition: left 0.3s;
}

---

方法二：
由於方法一IE瀏覽器不支持appearance 屬性並且沒有替代屬性，方法一不通過；
第二種方法，使用了label標籤，使用label中的for屬性關聯checkbox，當label被點擊時會觸發checkbox
的點擊事件，在同過CSS美化label。達到開關效果；label中的for可是很強大的，很好用

瀏覽器支持：
Firefox 支持。
Safari 支持
Chrome 支持
由於IE8及IE8以下不支持border-radius屬性，沒有圓角。

HTML:
<input type="checkbox" class="ch_t" id="ch1"/>
<label class="ch_label" for="ch1"></label>

邏輯：
1.將標籤checkbox隱藏
2.label中for元素關聯checkbox的id
3.設置label元素樣式，before樣式。。。

CSS:
.ch_t{
    // 隱藏
    display:none;
}
.ch_label{
    // 設置label爲塊區域
    display: inline-block;
    width: 40px;
    height: 19px;
    // 背景色
    background-color: #ccc;
    // 圓角
    border-radius: 20px;
    // 去掉外邊款樣式
    outline:none;
    border: 1px solid #ccc;
}
// 獲取checkbox是否選擇並且關聯到label標籤上 
.ch_t:checked + .ch_label{
    background-color: #3C92DC;
}
// 選中後中間圓圈的便宜位置
.ch_t:checked + .ch_label:before{
    left:44%;
}
// 通過before僞類實現
.ch_label:before{
    position:relative;
    top:-1px;
    // content 屬性與 :before 及 :after 僞元素配合使用，來插入生成內容。
        // 此元素值爲'' ,但是必須存在，否則將不顯示中間那個圓圈 
    content: "";
    display: block;
    width:50%;
    height:100%;
    background-color:#fff;
    border-radius:20px;
    border: 1px solid #ccc;
}

---

方法三：

由於IE瀏覽器版本比較多，各個IE的版本對CSS和HTML的支持都不同，很多屬性都不可用。
雖然現在微軟已經停止對IE各個版本的維護及更新，東家都放棄了，我們還在繼續堅持兼容，悲劇。
所以要實現這種IOS開關的按鈕功能，最簡單最直接最粗暴的方法就是img，把它做成兩張圖片，通過JS點擊事件控制圖片顯示隱藏。暴露的問題就是沒有交互效果，而且圖片加載也需要時間，佔用的資源也大。

結語：還會繼續尋找方法四、方法五。。。會持續更新。。。。