必须使用 <input type="checkbox"> 而非 <button>，因其原生支持可访问性语义、键盘操作（空格键）、表单重置、屏幕阅读器自动朗读及 :checked 稳定锚点，而 <button> 手动维护状态易不同步且兼容性差。
纯 CSS 能实现开关按钮的视觉切换，但“多功能”——比如同时控制界面显隐、触发动画、同步状态到 JS 逻辑、适配键盘与屏幕阅读器——必须靠 <input type="checkbox"> 作为唯一可信的状态源。绕开它用 <div> 或 <button> 模拟，迟早会遇到 focus 焦点丢失、Enter 键失效、读屏器朗读错误、连点状态错乱等问题。
为什么必须用 <input type="checkbox"> 而不是 <button>
浏览器原生 <input type="checkbox"> 自带可访问性语义、键盘支持（空格键切换）、表单序列化能力，且其 :checked 伪类是 CSS 动画和 DOM 响应的稳定锚点。而 <button> 没有内置布尔状态，JS 手动维护 dataset.state 或 aria-pressed 容易不同步，尤其在页面刷新、SSR 渲染或 SSR/CSR 混合场景下极易断裂。
-
<input>的checked属性可被 form.reset() 统一重置；<button>需额外监听并手动同步 - 屏幕阅读器对
<input type="checkbox">自动朗读“已选中/未选中”，对<button aria-pressed="true">需额外写aria-label且不保证一致 - 移动端 Safari 对
pointer-events: none+opacity: 0隐藏的<input>支持稳定；对模拟按钮的tabindex和焦点管理常有兼容问题
<label> 包裹结构与点击区域扩展
把 <input> 放进 <label> 内是最简可靠的点击区域扩展方式，无需 JS 绑定事件或额外 for/id 关联。用户点击 label 任意位置都会触发 input 切换，且保持语义完整。
- 结构必须是
<label><input type="checkbox">...</label>，不能是<label for="id"></label><input id="id">—— 后者在部分旧版 Android WebView 中点击 label 不触发 input - label 内可直接放文字、SVG 或伪元素，但不要嵌套另一个交互元素（如 button），否则会干扰事件冒泡
- 若需自定义尺寸，给 label 设
display: inline-flex或display: block，再通过 padding 控制热区，比强行放大 input 更安全
CSS 动画与 SVG 图标切换的限制
开关滑块动画可用 transform: translateX() 平滑过渡，但图标切换（如播放 ⇄ 暂停）不能靠修改 d 属性实现动画——CSS 对 <path d="..."> 的 d 值不支持 transition。必须用两套路径 + opacity 切换，或用 transform 移动已有路径。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：一个
<svg>内放两个<path>，分别加 class.icon--on和.icon--off，用<input>:checked ~ .icon--on { opacity: 1 }控制显隐 - 禁止把 SVG 当 background-image 使用——无法用 CSS 控制 fill 或 transform，也无法响应 :checked 状态
- 若用内联 SVG，务必加
aria-hidden="true"（当按钮有可见文字时），或aria-label（纯图标时），否则屏幕阅读器会重复朗读 path 数据
JS 监听与防连点的实际写法
监听 change 事件而非 click，因为前者只在真实状态变更后触发（例如键盘空格切换、JS 赋值 el.checked = true），后者可能在未真正切换时就执行（比如快速连点导致 input 状态还没更新）。
- 防连点只需在事件处理器开头加
if (e.target.disabled) return;，然后设e.target.disabled = true，异步操作完成后恢复，比用节流函数更精准 - 不要用
e.target.checked判断当前状态——它总是反映最新值；但要注意：若 JS 中手动赋值el.checked = false，不会触发change，需主动 dispatch - 需要同步多个 UI 元素（如开关 + 文字 + 另一容器显隐）时，统一从
input.checked读取，别依赖事件参数里的旧值
最易被忽略的是深色模式适配和 focus outline：滑块背景色要用 color-scheme: light dark 声明，focus outline 必须保留（可定制样式但不可 outline: none），否则键盘用户根本不知道当前焦点在哪。
