最终效果如图：
模拟开关当然需要一个选项框，这里用到了复选框checkbox
点击开关按钮，则开启或关闭。原生的checkbox无法做到图示的效果，所以就需要额外的元素来表示图中的开关
而我们又要使用到checkbox的点击效果以及点击后是否选中（checked）的效果，所以checkbox不能隐藏，但可以用覆盖的方式
为了减少多余标签的使用，可以使用伪元素:before、:after ，标签结构为
开启WLAN
用: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;
}
下载本文