滑动开关需隐藏原生checkbox并用伪元素模拟，保留其表单功能与可访问性；正确结构为label包裹input或通过for/id关联；滑块用transform移动并精确过渡transform、background-color和box-shadow；必须保障键盘焦点与空格键切换，禁用display:none，添加:focus-within轮廓。
滑动开关本质是隐藏原生 input[type="checkbox"]，用伪元素模拟视觉效果
浏览器对 input[type="checkbox"] 的样式控制极其有限，直接改 appearance 或 border 只能做简单美化，无法实现滑块拖动效果。真正可行的方案是：保留原生 checkbox 用于表单提交和可访问性，用相邻的 label 包裹它，并通过 :checked + ::before/::after 控制滑块位置与颜色。
关键点：
• 必须把 input 置为 position: absolute; opacity: 0;（不能用 display: none，否则失去焦点和屏幕阅读器支持）
• label 需设 position: relative; 以便伪元素定位
• 滑块移动靠 transform: translateX() 实现，比修改 left 更性能友好
HTML 结构必须满足 input 和 label 的关联关系
错误写法：<div>
<input type="checkbox"><span>开关</span>
</div> —— 这样无法点击文字触发，且无语义关联。
正确结构（两种等效方式）：
<label class="switch"> <input type="checkbox"><span class="slider"></span> </label>
或（显式绑定）：
<input type="checkbox" id="my-switch"><label class="switch" for="my-switch"><span class="slider"></span></label>
注意：
• for 属性值必须与 input 的 id 完全一致
• label 内部的 span（或其他元素）作为滑轨/滑块容器，不参与表单提交，纯视觉用途
transition 要加在 transform 和 background 上，别漏掉 box-shadow
滑动动画卡顿、闪烁，通常是因为过渡属性写得太宽泛，比如 transition: all .2s。这会强制重绘整个元素，尤其在移动端容易掉帧。
推荐写法：
.slider {
transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
background-color .2s,
box-shadow .2s;
}
理由：
• cubic-bezier(0.25, 0.46, 0.45, 0.94) 比线性更自然，接近 iOS 开关手感
• box-shadow 在滑块高亮时变化（如添加内阴影表示“按下”），也需过渡
• 不要过渡 width/height，它们触发 layout；用 transform 移动更安全
无障碍支持不能只靠 aria-label，还得处理键盘焦点与空格键
单纯加 aria-label="开启夜间模式" 不够。用户用 Tab 键聚焦到开关时，按空格应切换状态 —— 这由原生 input[type="checkbox"] 自动支持，但前提是它没被 opacity: 0 后完全脱离交互流。
确保以下三点：
-
input保持可聚焦（默认行为，不要加tabindex="-1"） -
label有足够点击热区（建议最小尺寸 44×44px，符合 WCAG） - 用
:focus-within给label添加焦点轮廓，例如：.switch:focus-within .slider { outline: 2px solid #007aff; outline-offset: 2px; }
如果用了 JS 监听 click 手动切换 checked，反而会破坏空格键支持 —— 坚持让浏览器原生处理状态变更。
outline 的开关，在盲人用户用 VoiceOver 操作时，根本不知道自己聚焦到了哪个控件。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
