原生checkbox不能直接当滑块用，因其渲染由浏览器UA样式硬编码，仅提供语义开/关状态，不支持拖动、过渡或transform动画；强行修改会触发重排重绘且跨浏览器表现不一致。
为什么原生 <input type="checkbox"> 不能直接当滑块用
因为浏览器对 checkbox 的渲染是纯语义化的——它只负责“开/关”状态，不暴露任何可拖动、可动画的视觉层。你看到的默认勾选框，是 UA（用户代理）样式硬编码的，无法用 CSS 直接拉伸、加过渡或模拟滑动轨迹。强行用 transform 或 width 动态改它，会触发重排+重绘，且在 Safari 和旧版 Android 上表现不一致。
用 label + checkbox + ::before/::after 实现真滑块
核心思路：隐藏原生 checkbox，用 label 捕获点击区域，再用伪元素画滑块轨道和滑钮。所有交互仍走原生表单逻辑，无障碍支持、checked 状态、JS 监听都照常工作。
-
checkbox设为position: absolute; opacity: 0;，保留功能但不可见 -
label设置display: inline-block; position: relative;，作为容器 - 用
label::before绘制轨道（背景色+圆角），label::after绘制滑钮（绝对定位+transition: transform 0.2s ease） - 通过
input:checked + label::after控制滑钮位置：transform: translateX(20px)（假设轨道宽 40px，滑钮宽 20px）
input[type="checkbox"] {
position: absolute;
opacity: 0;
}
label {
display: inline-block;
position: relative;
padding-left: 48px;
}
label::before {
content: '';
position: absolute;
left: 0; top: 50%; transform: translateY(-50%);
width: 40px; height: 20px;
background: #e0e0e0; border-radius: 10px;
}
label::after {
content: '';
position: absolute;
left: 4px; top: 50%; transform: translateY(-50%);
width: 12px; height: 12px;
background: white; border-radius: 50%;
transition: transform 0.2s ease;
}
input:checked + label::after {
transform: translateX(20px) translateY(-50%);
}
transition 卡顿？检查这三处
滑块“丝滑”与否，90% 取决于动画是否走 GPU 合成。常见卡顿不是因为 JS，而是 CSS 层叠上下文或属性选择不当。
- 别用
left/right做动画：触发 layout，尤其在 iOS Safari 上掉帧明显；必须用transform: translateX() - 确保滑钮有
will-change: transform;（仅在需要时加，避免滥用） - 如果父容器用了
overflow: hidden，而滑钮移出边界，部分安卓 WebView 会裁剪动画末帧——把label改成overflow: visible或加margin-right预留空间
移动端点击区域太小，怎么安全扩大
原生 checkbox 点击热区只有 12×12px 左右，手指点不准。不能只靠 padding，得兼顾可访问性和触控反馈。
立即学习“前端免费学习笔记（深入）”；
- 用
label的padding-left扩大可点击区，同时保持视觉尺寸不变 - 给
label加cursor: pointer;，并在:active状态加background-color: rgba(0,0,0,0.05);提供即时反馈 - 避免用
font-size缩放整个label，会导致滑钮比例失调；单独控制伪元素尺寸
transition 还卡，是因为忘了 transform 必须是唯一动画属性，或者误加了 box-shadow 在同一动画里。这点在低端安卓机上特别敏感。 
