MIUI选项框开关样式模拟

最终效果如图：

实现过程

1. 选项框checkbox

模拟开关当然需要一个选项框，这里用到了复选框checkbox

2. 理解开关的过程

点击开关按钮，则开启或关闭。原生的checkbox无法做到图示的效果，所以就需要额外的元素来表示图中的开关

而我们又要使用到checkbox的点击效果以及点击后是否选中（checked）的效果，所以checkbox不能隐藏，但可以用覆盖的方式

为了减少多余标签的使用，可以使用伪元素:before、:after ，标签结构为

　　

 开启WLAN
 
 
 
 

3. 开关的实现

用:before伪元素作为开关背景层，用:after伪元素作为开关项（即那个小圆圈）

 .switch input:before {
 content: '';
 display: inline-block;
 position: relative;
 border-radius: 20px;
 border: 1px solid #ccccc6;
 box-shadow: 0 0 1px 1px #ececf3;
 background-color: #fff;
 cursor: pointer;
 }

 .switch input:after {
 content: '';
 position: absolute;
 width: 12px;
 height: 12px;
 top: 2px;
 left: 3px;
 border-radius: 50%;
 background-color: #ccccc6;
 transition: .2s left, .2s background-color;
 }

初始小圆圈在左侧，当开关状态为开启时，右移，并更新开启状态的背景色

 .switch input:checked:after {
 left: 15px;
 background-color: #36a6fa;
 transition: .2s left, .2s background-color;
 }