原生 checkbox 自带状态管理、键盘可访问性、表单提交和屏幕阅读器支持，而 div 模拟需手动实现 aria-checked、tabindex、事件响应等，易出错且丢失语义；滑块效果应隐藏原生 input，用 label 包裹并配合 ::before 绝对定位实现滑块，通过 :checked 控制 transform 和 background 过渡，transition 必须写在被变换元素上（如 label::before）且仅限 transform/background 以避免重排，移动端需扩大 label 点击区域并确保 focus、禁用态、对比度、缩放等无障碍细节完备。
为什么直接用
因为原生 checkbox 自带状态管理、键盘可访问性（空格切换）、表单提交行为，且能被屏幕阅读器识别。用 div 模拟反而要手动处理 aria-checked、tabindex、Enter/Space 响应，还容易在表单序列化时丢值。
核心思路是：隐藏原生 checkbox，用其 :checked 状态驱动伪元素或兄弟元素的样式变化。
如何用 ::before 和 ::after 实现滑块+轨道效果？
关键在于定位和过渡控制。轨道用 label 包裹，滑块用 input[type="checkbox"] + label::before 绝对定位实现；背景色切换靠 label::after 或直接设 label 的 background。
实操要点：
- 给
input设position: absolute; opacity: 0; pointer-events: none;彻底隐藏但保留功能 -
label设position: relative; display: inline-block; width: 50px; height: 26px;（常见尺寸） -
label::before是滑块：content: ""; position: absolute; top: 2px; left: 2px; width: 22px; height: 22px; background: white; border-radius: 50%; transition: 0.2s ease transform; -
input:checked + label::before中加transform: translateX(24px);（24 = 轨道宽 - 滑块宽） -
label本身设background: #ccc; border-radius: 13px;，input:checked + label改为background: #4CAF50;
transition 写在哪个元素上才不会卡顿？
必须写在被变换的元素上（即 label::before），且只过渡 transform 和 background——这两个属性能走 GPU 加速。如果写成 left 或 margin-left，会触发重排（reflow），尤其在低端设备上明显拖慢。
错误示例：label::before { transition: left 0.2s; } → 触发重排
正确写法：label::before { transition: transform 0.2s ease; }
另外，务必加 will-change: transform;（可选但推荐）告诉浏览器提前优化。
移动端点击区域太小怎么办？
原生 checkbox 的点击热区默认只有 13×13px 左右，手指点不准。解决方案是扩大 label 的可点击范围，而不是改 input 尺寸。
实操建议：
- 给
label加padding: 8px;（上下 padding 防止文字贴边，左右 padding 扩大热区） - 确保
for属性或嵌套结构让 label 点击能触发 checkbox（推荐嵌套：） - 避免用
font-size: 0;清除 inline 元素间隙——这会让 label 内文本消失，可用line-height: 0;或 flex 替代
真机测试时发现 iOS Safari 对小热区有额外限制，加 -webkit-tap-highlight-color: transparent; 可消除点击高亮延迟。
真正难的不是画出滑块，而是让 focus 状态可见、禁用态语义正确、颜色对比度达标（WCAG AA 要求 4.5:1）、缩放 200% 仍可用——这些细节不写进 CSS 就等于没做完。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
