原生 checkbox 样式跨平台不一致且无法用 CSS 完全定制，需用 label 包裹隐藏的 input 并通过伪元素模拟 UI；必须确保语义、无障碍和禁用态正确处理。
为什么直接用 <input type="checkbox"> 无法满足UI需求
浏览器原生 <input type="checkbox"> 的样式在各平台差异大（macOS 圆角+阴影，Windows 扁平方框，iOS 小圆点），且无法用 CSS 直接修改核心外观（比如滑块、轨道、尺寸）。设计师给的 Toggle 按钮通常是带过渡动画、固定宽高比、左右文字标签、禁用态灰阶的控件——这些原生元素做不到。
用 label 包裹 input + :checked + ::before/::after 是最可靠方案
这是目前兼容性最好（IE9+）、语义正确、无障碍友好的方式。核心逻辑是：隐藏原生 input，利用 label 点击透传到它，再用伪元素模拟滑块和轨道。
- 必须给
input加position: absolute; opacity: 0; pointer-events: none;—— 仅隐藏，不移除交互能力 -
label需设position: relative;，为伪元素提供定位上下文 - 轨道用
label::before，滑块用label::after；input:checked + label::after控制滑块位移（推荐用transform: translateX()，性能优于left） - 务必加
for属性或把input套进label内，否则点击 label 不触发 checkbox 状态切换
<input type="checkbox" id="toggle-1"> <label for="toggle-1"></label>
appearance: none 在部分浏览器下失效，别依赖它
虽然现代 CSS 支持 appearance: none 来重置表单控件样式，但它在 Safari 15.4–16.3 和旧版 Firefox 中对 checkbox 不生效，且 IE 完全不支持。强行只用它会导致滑块残留或错位，尤其在 macOS 上可能仍显示原生圆点。
- 安全做法永远是先隐藏原生控件（
opacity: 0），再画新 UI -
appearance: none可作为辅助，但不能作为唯一隐藏手段 - 若需支持 Safari 15.4，必须配合
-webkit-appearance: none+opacity双保险
无障碍与键盘操作容易被忽略的关键点
美化后若不处理，屏幕阅读器可能读不出状态，键盘用户按 Tab 进入后无法用空格切换——这违反 WCAG 2.1。
立即学习“前端免费学习笔记（深入）”；
- 保留
input的id和label的for（或嵌套），确保语义关联 - 添加
aria-checked="true/false"到label，并在 JS 中同步更新（纯 CSS 方案无法动态更新 aria 属性） - 如果用 JS 控制状态，记得监听
keydown事件捕获Space键，手动触发click - 禁用态要同时设
input[disabled]和label的opacity+cursor: not-allowed
left: 20px 而非 transform: translateX(20px) 导致缩放页面时错位），以及忘记在 JS 更新状态后同步 aria-checked。这两个点一旦漏掉，测试阶段才暴露，返工成本最高。 
