必须用 checkbox + label 实现开关按钮，因其原生支持键盘操作、屏幕阅读器朗读及无障碍聚焦；label 必须显式关联 input，input 不可隐藏而应设为 opacity: 0 等使其“在场但不可见”。
纯 CSS 实现的开关按钮，checkbox + label 是唯一可靠、语义正确、无障碍友好的方案；用 div + JS 模拟不仅增加维护成本，还会破坏可访问性。
为什么必须用 checkbox 和 label 联动
原生 input[type="checkbox"] 天然支持键盘聚焦、空格切换、屏幕阅读器朗读（如“启用通知，已勾选”），而自定义 div 开关无法自动获得这些能力。用 label 包裹或通过 for 属性绑定，才能把点击区域扩大到整个视觉开关——否则用户只能精准点中那个 0.01px 宽的原生复选框。
常见错误现象：click 事件没触发、Tab 键跳过开关、VoiceOver 完全读不出状态。
-
label必须显式关联input：要么包裹input，要么用for="id"+id匹配 - 绝对不能隐藏
input用display: none或visibility: hidden——这会让它彻底退出可访问树 - 正确做法是用
position: absolute; opacity: 0; pointer-events: none;让它“在场但不可见”
:checked + ~ 或 + 选择器控制样式
CSS 切换依赖伪类 :checked 触发状态变化，但它的作用范围有限：只能影响后续兄弟元素（~）或紧邻兄弟（+），不能向上或跨层选中父容器。所以 HTML 结构必须是 input 在前，视觉开关（如 span 或 div）在后。
立即学习“前端免费学习笔记（深入）”；
示例结构：
<label class="switch"> <input type="checkbox"> <span class="slider"></span> </label>
对应关键 CSS：
.switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.switch input:checked + .slider {
background-color: #007aff;
}
.slider {
position: relative;
display: inline-block;
width: 52px;
height: 32px;
border-radius: 16px;
background-color: #e0e0e0;
transition: background-color 0.2s;
}
.slider::before {
content: '';
position: absolute;
top: 4px;
left: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: white;
transition: transform 0.2s;
}
.switch input:checked + .slider::before {
transform: translateX(20px);
}
移动端点击区域与响应延迟问题
iPhone 开关在真机上点击有时会“卡一下”，本质是 iOS Safari 对非可点击元素（如 span）默认加了 300ms 延迟。虽然 label 是天然可点击的，但若你额外给 .slider 加了 cursor: pointer 却没配 touch-action: manipulation，仍可能触发延迟。
- 务必在开关容器（如
.switch）上加touch-action: manipulation - 避免给
.slider或::before设置user-select: none—— 这会干扰部分 Android 浏览器的点击识别 - 如果开关嵌在
scroll容器里，确保没有overscroll-behavior: contain意外拦截了 touchstart
状态同步与 JS 干预的边界
当需要监听开关变化或初始化状态时，直接读写 input.checked 即可，不要操作类名。JS 改变 checked 属性会自动触发 :checked 样式重绘，且保持表单提交行为一致。
容易踩的坑：
- 用
element.classList.toggle()手动切类名 → 状态和 DOM 不同步，form.submit()时值仍是旧的 - 监听
click而非change→ 用户用空格键切换时不会触发 - 初始化时只设 HTML
checked属性，不设 JSinput.checked = true→ SSR 渲染后 JS 覆盖会闪一下
真正麻烦的是动画帧率和深色模式适配——这两个点往往被忽略，但直接影响用户是否觉得“像原生”。比如 transform: translateX() 必须用 will-change 或硬件加速，否则滑块拖拽卡顿；深色模式下 #e0e0e0 在黑色背景上就糊成一片，得用 color-scheme: light dark 配合 @media (prefers-color-scheme: dark) 单独调色。
