CSS模拟苹果系统开关按钮效果

网页移动端开发时经常遇到开关按钮，而html表单没有相对于的按钮，这时我们就需要利用checkbox的功能来模拟开关按钮，具体实现方法和checkbox和radio自定义的方法类似，具体可以结合网站中的优化checkbox和radio方法对比学习。

这里介绍的是利用css对开关按钮实现的方法，当然大家也可以尝试用js的方法修改，利用纯css存在兼容问题，在IE9及以上才能正常显示，支持谷歌、火狐等主流浏览器。 

最终效果图如下：

实现原理：添加一个label和input标签，然后在label标签里添加span/em标签（用于模仿开关的样式），默认然input标签隐藏，span/em做成开关样式（css样式控制），然后利用：loael：checked伪类选择器控制按钮是否选中，选中需要切换下span的图片。

HTML代码：

开关按钮
<div>
     <input type="checkbox" id="blance" value="" >
     <label for="blance"><em></em></label>
</div>
<div>
     <input type="checkbox" id="blance1" value="" checked="" >
     <label for="blance1"><em></em></label>
</div>

CSS代码

.Switch input {
    display: none
}
.switchLable {
    width: 52px;
    background: #CCC;
    height: 28px;
    border-radius: 14px;
    float: right;
    margin: 8px 10px 0 0;
    box-shadow: 0 1px 2px rgba(0,0,0,.1) inset;
}
.switchLable em {
    width: 26px;
    height: 26px;
    float: left;
    margin: 1px;
    border-radius: 13px;
    box-shadow: 2px 3px 8px rgba(0,0,0,.1);
    background: #FFF;
}
#blance:checked + label {
    background: #52d864;
}
#blance:checked + label em {
    float: right;
}
#blance:disabled + label {
    opacity: 0.5
}

这样就可以实现开关的效果！ 

使用注意事项，因为label的for参数是绑定id的，所以需要对每个switch中的input都需要设置id属性，同时设置好id属性后再样式中也需要针对不同id设置他的：checked伪类选择器的样式【见css样式红色部分】

最后在对应开关中input需要动态修改value的值，切换开关时，当开关打开时设置value=1；关闭时value=0；这里需要用js/jq来设置；

JS/JQ代码 [为了简化代码这里用jq来实现 ]

("#blance,#blance1").change(function () {
     if($(this).attr('checked')){
           $(this).val(1)
           $(".switchShow").show();
      }else{
           $(this).val(0);
           $(".switchShow").hide();
      }
  })

效果演示：www.intewl.com/demo/ui/index.html

代码下载：https://pan.baidu.com/s/1MQvGx8SfK5ceIm2dHUZc_g