CSS---checkbox美化，ios风格的开关按钮

这段时间工作的新需求，是做一个类似IOS开关按钮。用来显示是否选中。
如：
默认未选中

默认选中

---

方法一：

CSS中通过:before、:after伪类美化checkbox按钮，来实现；

HTML: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:
type="checkbox" class="ch_t" id="ch1"/>
class="ch_label" for="ch1">

逻辑：
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点击事件控制图片显示隐藏。暴露的问题就是没有交互效果，而且图片加载也需要时间，占用的资源也大。

结语：还会继续寻找方法四、方法五。。。会持续更新。。。。