必须用input[type="checkbox"]而非div或button，因其提供css可捕获的:checked/:not(:checked)二值状态，保障transition动画生效；div+onclick无法被css感知，所有“滑动开关”实为checkbox视觉重绘。
为什么必须用 input[type="checkbox"] 而不是 div 或 button
因为只有 input[type="checkbox"] 提供稳定的、可被 CSS 捕获的二值状态——:checked 和 :not(:checked)。用 div + onclick 模拟，CSS 就无法感知状态变化，transition 动画直接失效。浏览器至今没原生 <switch></switch> 标签，所有“滑动开关”本质都是对 checkbox 的视觉重绘。
label 怎么关联 input 才不点不动
最稳妥的是把 input 直接包进 label 里，且 input 写在前面：
<label> <input type="checkbox" id="theme-toggle"><span>深色模式</span> </label>
这样不用写 for 属性，点击 label 任意位置（包括文字、空白）都能触发。如果非要用分离结构，必须确保 label[for] 的值和 input[id] 完全一致，大小写、连字符都不能错——漏一个字符就点无效。
常见错误：
-
display: none隐藏input→ 点击失效（它已脱离可访问流） - 用了
opacity: 0却忘了加pointer-events: none→ 触摸时可能误触底层元素 -
label没设cursor: pointer→ 用户看不出这是可点击区域
滑块位移怎么算才不跑出轨道
位移量不是凭感觉写的。假设轨道宽 52px、高 26px，滑块是直径 22px 的圆球，轨道左右各有 2px 内边距，则滑块中心从左到右可移动的距离是：52px - 2×2px - 22px = 26px。所以 transform: translateX(26px) 才刚好贴右边缘。
关键点：
- 过渡必须写在伪元素上，比如
label::after { transition: transform 0.2s ease-in-out; }，不能写在label或input上 - 别用
transition: all，容易因颜色、阴影等其他属性变化拖慢动画 - 移动端要保证热区 ≥ 44×44px，给
label加min-height: 44px或padding
深色模式和键盘导航怎么兼顾
纯 CSS 开关默认不响应系统偏好，但可以加媒体查询适配：
@media (prefers-color-scheme: dark) {
.switch-track { background-color: #444; }
.switch-thumb { background-color: #fff; }
}
键盘支持靠两点：一是保留 input 的原生 focus 状态（别用 clip 或 visibility: hidden 彻底抹掉），二是给 label 加 tabindex="0"（如果没包裹 input）；若已包裹，则天然支持 Tab 切换 + Space 触发。
真正容易被忽略的点：无障碍语义。不要只靠视觉提示，至少加 aria-label 或用 visually-hidden 文字说明当前状态，否则屏幕阅读器用户完全不知道这是个开关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
