原生 checkbox 语义正确、可访问、无需手动同步状态；隐藏时用 position: absolute + opacity: 0（禁用 display: none），通过 input:checked + label::after 控制滑块位移，transition 必须写在伪元素上，label 热区需用 padding 扩展确保移动端点击可靠。
为什么直接用 <input type="checkbox"> 而不是 div + JS？
因为语义正确、可访问（支持键盘空格切换、屏幕阅读器识别）、无需手写状态同步逻辑。用 div 模拟反而要处理 aria-checked、tabindex、焦点管理，还容易漏掉 :focus-visible 样式。原生 checkbox 是唯一可靠起点。
如何用 CSS 隐藏原生 checkbox 并重绘外观？
核心是把原生控件视觉隐藏但保留功能，再用 ::before/::after 和兄弟选择器 + 控制伪元素状态。关键点：
-
position: absolute+opacity: 0或clip: rect(0 0 0 0)隐藏输入框（不能用display: none或visibility: hidden，否则失去交互能力） - 用
input[type="checkbox"] + label选中紧邻的label，再在 label 上画滑块和轨道 - 滑块移动靠
transform: translateX()，不要用left，避免触发重排 - 过渡动画加在 label 或伪元素上，而非 input 本身（input 不触发
:checked的 transition）
示例结构：
<input type="checkbox" id="toggle"><br><label for="toggle"></label>对应 CSS 中
input#toggle:checked + label::after 控制滑块右移。
:checked 状态下怎么让滑块“滑动”而不是“跳变”？
必须确保滑块元素（通常是 label::after）有明确的初始位置和目标位置，且两者单位一致（都用 px 或都用 rem），同时定义 transition。常见翻车点：
- 没给
label::after设content: ""和display: block，导致伪元素不渲染 -
transition写在input上——无效，必须写在被切换样式的元素上（如label::after） - 起始
transform: translateX(0)和结束transform: translateX(24px)数值不匹配轨道宽度，造成滑块出界或不到位 - 忘了设
box-sizing: border-box，边框或 padding 影响实际位移距离
移动端点击区域太小怎么办？
原生 checkbox 点击热区默认很小，必须扩大 label 的可点击范围。最稳方案是：
- 给
label设display: inline-block或display: block - 用
padding扩展热区，比如padding: 8px 16px，比改font-size或width/height更安全（不影响布局流） - 避免只依赖
label文字内容撑开尺寸——文字可能为空，或被截断 - 如果用
for属性绑定，确保id和for值完全一致（区分大小写）
真机测试时注意：iOS Safari 对过小热区有自动放大逻辑，但不可依赖；Android Chrome 则更严格，必须显式扩大。
真正卡住人的往往不是滑块动效，而是 label 没正确关联 input，或者 transition 属性漏写了单位、写错了选择器层级。多检查两遍for 和 id 是否拼错，比调动画参数更省时间。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
