MIUI选项框开关样式模拟

有IOS的开关模拟，当然也有MIUI的开关模拟

看到设置选项里面的开关样式，突发奇想地来试试

最终效果如图：

实现过程

1. 选项框checkbox 

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

2. 理解开关的过程

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

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

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

　　<div class="switch-wrap">    <span><span class="switch-action">开启</span>WLAN</span>    <label class="switch">      <input type="checkbox" name="switch" id="switch">    </label>  </div>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：MIUI选项框开关样式模拟

关键词：