纯css开关按钮需用语义化checkbox+label实现，隐藏input但保留在可访问性树中，通过:checked伪类驱动滑块位移，确保键盘操作、屏幕阅读器支持及深色/高对比度模式兼容。
纯 CSS 实现开关按钮（toggle switch）的滑动效果，关键在于用 checkbox 的状态驱动伪元素位移，而不是依赖 JavaScript 控制 class。只要结构合理、样式精准，就能做到 100% 响应式、无障碍、无 JS 依赖。
用 input[type="checkbox"] + label 组合绑定点击区域
开关必须可聚焦、可空格切换、支持屏幕阅读器——这要求真实 input 元素存在且与 label 正确关联。隐藏原生控件但不 display: none（否则会脱离可访问性树），改用 position: absolute; opacity: 0; pointer-events: none;。
常见错误：只用 div 模拟 checkbox，导致键盘无法操作、checked 状态无法被表单提交或 JS 获取。
-
label必须有for属性指向input的id，或把input包在label内 - 不要用
visibility: hidden或opacity: 0单独隐藏input，需配合pointer-events: none防止遮挡点击 - 确保
label区域足够大（至少 44×44px），满足移动端触控最小尺寸
用 ::before 和 ::after 构建滑块与轨道
轨道（track）用 label 的背景实现，滑块（thumb）用 label::before 绝对定位绘制。状态切换靠 input:checked + label::before 改变 transform: translateX() 或 left 值。
性能提示：优先用 transform: translateX() 触发 GPU 加速，避免直接改 left 引起重排。
- 滑块宽度通常设为轨道高度的 80%～90%，留出边缘间隙
- 未选中时
translateX(0)，选中时translateX(calc(100% - 2px))（减去滑块自身边框/阴影宽度） - 加
transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)比ease-in-out更顺滑
处理不同状态下的颜色与焦点反馈
用户需要明确感知当前状态和交互焦点。不能只靠颜色区分（色盲用户不可见），必须叠加形状、阴影或文字提示。
容易被忽略的点：:focus-within 在 label 上生效的前提是内部 input 获得焦点，而 input 已被视觉隐藏——所以焦点环必须加在 label 上，并用 outline 或 box-shadow 实现。
- 未选中轨道背景用浅灰（如
#e0e0e0），选中用品牌主色（如#4caf50） - 滑块默认用白色，加
box-shadow: 0 2px 4px rgba(0,0,0,0.2)提升层次感 -
label:focus-within::after可额外加一层虚线轮廓，宽度 2px，偏移 4px - 禁用状态（
input:disabled）要同时置灰轨道、降低滑块不透明度、禁用pointer-events
适配深色模式与高对比度模式
仅靠 @media (prefers-color-scheme: dark) 切换颜色不够——深色模式下若轨道用纯黑、滑块用纯白，对比度可能超标（>21:1），反而违反 WCAG。更稳妥的方式是使用系统语义色（Canvas, ButtonText）或通过 color-scheme: light dark 声明容器支持。
高对比度模式下，自定义背景和边框会被系统强制替换，此时必须保证内容仍可读：滑块位置变化（位移）、文字标签（如 “ON”/“OFF”）或图标（✅/❌）成为唯一状态指示。
- 在
label上加color-scheme: light dark，让浏览器自动调整表单控件默认色 - 避免在
::before/::after中用background: #fff，改用background: Canvas - 如果加了文字标签，用
aria-hidden="true"避免重复播报，但保留视觉可见性
最易出问题的地方不是动画逻辑，而是可访问性链路断裂：input 不可聚焦 → label 无 for → 焦点环消失 → 屏幕阅读器读不出状态。动手前先用 Chrome DevTools 的 Lighthouse 跑一次「Accessibility」审计，比调十次 transform 值更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
