HTML

<input id="customSwitch" type="checkbox" /> <label for="customSwitch" class="switch"></label>

CSS

/* 界说全局变量 */ :root { --base_color: rgba(0, 0, 0, 0.25); --act_color: #5dcb61; } /* 隐藏input输入框 */ #customSwitch { position: absolute; left: -9999px; } /* 设置自界说颜色 */ .switch { position: relative; display: inline-block; width: 40px; height: 20px; background-color: var(--base_color); border-radius: 20px; transition: all 0.3s 0s; } /* 开关圆球 */ .switch::after { content: ""; position: absolute; top: 1px; left: 1px; width: 18px; height: 18px; border-radius: 18px; background-color: white; transition: all 0.3s 0s; } input[type="checkbox"]:checked + .switch::after { transform: translateX(20px); } input[type="checkbox"]:checked + .switch { background-color: var(--act_color); }

核心常识点

隐藏真实input输入框，通过label for属性与input输入框绑定。

label标签自己作为椭圆形配景，用伪类作为开关圆球。

input选中后，需要单独设置label标签本体和伪类的移动

??本系列旨在通过最直接的事例最完整的代码，，解决一些开发中常遇到的实际问题。

例子链接??：https://github.com/TianYiYang0225/high-ku/tree/master/customSwitch

喜欢的伴侣可以点击存眷一波～每天城市更新最实用的项目技巧

有兴趣的小伙伴可以存眷一下我的公家号，互相学习，配合进步。

快速掌握—HTML快速实现自界说Input开关