纯CSS可实现可用、可访问、带动画的滑动开关，关键在于正确结构（label包裹input或for/id精准关联）、隐藏input用opacity:0+position:absolute而非display:none、动画作用于label::after等伪元素并用transform:translateX()位移、确保无障碍支持与焦点管理。
纯 CSS 就能做出可用、可访问、带动画的滑动开关，根本不需要 JavaScript —— 但前提是结构写对、样式绑准、过渡设在对的地方。
label 必须包裹 input 或显式关联 for
这是最常失效的点：点击没反应，不是 CSS 问题，而是触发器断了。input 要么被 label 包裹（推荐），要么 label 的 for 属性值必须严格匹配 input 的 id。
- ✅ 推荐写法：
<label><input type="checkbox"></label>—— 点击 label 任意位置都触发，无需 id - ⚠️ 易错写法：
<input id="sw1"><label for="sw2">开关</label>—— id 和 for 不一致，点击无效 - ❌ 危险写法：
<input type="checkbox" style="display: none">—— 完全移除交互能力，屏幕阅读器也读不到
opacity: 0 比 display: none 更安全
display: none 会让元素彻底退出渲染流和可访问性树，opacity: 0 + position: absolute 才是正确隐藏方式：它保留语义、支持键盘聚焦、不破坏 label 关联。
- 必须同时设置：
position: absolute防止占位空白，opacity: 0隐藏视觉，cursor: default避免鼠标样式异常 - 别把
transition写在input上 —— 它本身不渲染，动画无效；所有transition必须落在伪元素（如label::after）或真实子元素上 - 滑块位移用
transform: translateX()，不要用left—— 后者触发布局重排，动画卡顿
轨道与滑块尺寸要匹配位移量
滑块从左到右“滑动”的距离，等于轨道宽度减去滑块宽度。写死数值前得算清楚，否则滑块会出界或卡住。
立即学习“前端免费学习笔记（深入）”；
- 常见组合：轨道宽
60px、高34px、圆角17px；滑块宽高26px，则位移量 =60 - 26 = 34px，但还要减去左右内边距（比如各4px），实际translateX(26px) - 用
box-sizing: border-box统一盒模型，避免 padding/border 影响计算 - 移动端要注意：默认
touch-action: manipulation可能干扰拖拽，但开关本就不该拖，保持touch-action: none反而更稳
无障碍支持不能只靠 aria-label
加 aria-label 是基础，但真正影响读屏体验的是状态同步和焦点管理。
- 必须给
input加id，让label的for或包裹关系生效，否则 VoiceOver/NVDA 不知道这个开关控制什么 - 选中态颜色对比度至少达 4.5:1（如
#4CAF50on white），否则色弱用户无法分辨 - 不要禁用
:focus样式 —— 键盘用户依赖它定位，可用outline: 2px solid #007bff做可见焦点环
真正麻烦的从来不是怎么让滑块动起来，而是让它的状态在任何设备、任何辅助技术下都准确可感知 —— 尤其是当多个开关堆在一起时，DOM 结构稍乱，:checked + .slider 就会失效，这种 bug 往往要 inspect 元素逐层查父级关系才能发现。
