纯CSS实现开关切换按钮可行，必须依赖的:checked状态驱动样式与动画，通过隐藏checkbox、关联label、用伪元素绘制轨道和滑块，并配合transition实现平滑切换。
纯CSS实现开关切换按钮是可行的，但必须依赖 <input type="checkbox"> 的状态变化，不能脱离语义化表单控件。所谓“纯CSS”，是指视觉切换、动画、点击反馈全部由CSS完成，无需JS监听 change 事件——但前提是接受「状态不可编程读写、无法持久化、无逻辑联动」的限制。
为什么必须用 checkbox 而不是 button 或 div
浏览器原生不提供 <switch></switch> 标签，所有“开关”都是对 checkbox 的视觉重绘。只有 checkbox 具备两个稳定、可被CSS伪类捕获的状态：:checked 和 :not(:checked)。用 div + onclick 模拟，CSS 就无法感知状态变化，transition 动画会失效。
-
checkbox是唯一能被:checked选择器直接驱动的HTML元素 - 隐藏它必须用
opacity: 0或position: absolute; clip: rect(0 0 0 0)，不能用display: none（否则失去交互能力） -
label必须与checkbox关联（for属性或包裹），否则点击无效且无障碍支持断裂
label::before 和 label::after 分别做什么
典型结构中，label 承担“开关外壳”角色，::before 绘制轨道（track），::after 绘制滑块（thumb）。两者都需设置 position: absolute 和 transition。
-
label::before：固定尺寸（如width: 52px; height: 26px）、圆角（border-radius: 26px）、背景色（未选中时#ccc，选中时#4CAF50） -
label::after：小圆球（如width: 22px; height: 22px; border-radius: 50%），初始左偏移left: 2px；选中后通过input:checked + label::after移动到右端（transform: translateX(26px)） - 务必给
label加cursor: pointer，否则用户无法直观判断可点击
常见错误：动画卡顿、滑块出界、点击无反应
这些问题几乎都源于定位逻辑或选择器链断裂。
立即学习“前端免费学习笔记（深入）”；
- 滑块位移量算错：轨道宽52px，滑块宽22px，则最大右移距离是
52px - 22px = 30px，但因轨道有左右内边距（如各2px），实际可用空间为26px，所以transform: translateX(26px)才刚好贴右边缘 - 点击无反应：检查
label的for是否匹配input的id；或是否误用了display: none隐藏input - 动画不触发：确认
transition写在::after上（不是label），且属性名与变化值一致（如用transform就不能只写all，要明确写transform 0.2s ease） - 移动端点不中：给
label加min-height: 26px并确保触摸区域 ≥ 44×44px，避免 iOS Safari 忽略小点击
真正需要 JS 的场景（比如存 localStorage、联动其他组件、发送API请求）无法绕过，纯CSS开关只负责「呈现状态」。如果忘了这一点，后期加逻辑时就会发现样式和状态脱节——这是最容易被忽略的分水岭。
