CSS 如何实现开关按钮（switch)
目录
推荐使用现成的组件，不用重复造轮子。
- Next.js 可以用 [nextui-org[(https://nextui.org/docs/components/switch)
手动实现思路：
-
（关键）使用
<Label>关联<Input type=checkbox>，响应鼠标操作
方法一：按照固定层级：<label><input /> <span or any other elment> </label>
方法二：使用label的for属性等于input的ID -
隐藏
<Input>
display:none -
通过设置 label 的样式来实现 switch 的视觉样式
label:before伪元素，是 switch 按钮的样式label:after是按钮底座 switch base 的样式- 或者时 label 的子元素来设计样式
-
通过
input:checked状态来设置相关元素跟随变化。包括label的样式input:checked + label {}开（选中）时的样式input:not(:checked) + label {}关（未选中）时的样式
参考文章：