原生 checkbox 无法实现 ios 滑动效果，因其本身不可见、不支持伪元素和 transform 动画，滑块必须用 label::after 模拟，并通过 :checked + label::after 触发 translatex() 位移，配合 cubic-bezier 曲线和正确定位才能实现顺滑切换。
为什么直接用 input[type="checkbox"] 无法实现 iOS 风格滑动效果
原生 checkbox 的勾选状态只能触发 :checked，但它的视觉容器（label 或父元素）默认不响应拖拽、过渡或位移动画。iOS 开关的“滑块”是独立于 checkbox 的伪元素，必须靠 ::after 模拟，并通过 transform: translateX() 移动——而原生控件本身不可位移。
常见错误是只给 input 加样式，或者把 ::after 放在 input 上（无效：input 不支持伪元素）。正确做法是把 ::after 放在包裹它的 label 或自定义容器上。
- 必须用
label包裹input，并设置for/id关联，否则点击无响应 -
input本身需设为opacity: 0; position: absolute;隐藏但保留可交互区域 -
label要设position: relative;，才能让::after相对于它定位 - 滑块位移距离不是固定像素值，应基于容器宽度计算（如
calc(100% - 20px)），否则缩放或字体变化时错位
如何用 :checked + label::after 实现左右平滑位移
关键在于利用相邻兄弟选择器 + 触发状态切换，并用 transition 控制 transform 动画。iOS 开关的滑块从左到右移动约等于容器宽度减去滑块自身宽，所以位移量要动态计算。
label {
position: relative;
display: inline-block;
width: 52px;
height: 32px;
}
label::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 28px;
height: 28px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}
input:checked + label::after {
transform: translateX(20px); /* 52px - 2px - 28px = 22px，微调至 20px 更贴近 iOS */
}
-
translateX(20px)是硬编码，更健壮写法是translateX(calc(100% - 28px - 4px))（减去左右 padding 和滑块宽） - 务必加
cubic-bezier(0.4, 0.0, 0.2, 1)，这是 iOS 系统动画曲线，比ease-in-out更真实 - 不要用
left动画替代transform，会触发重排，卡顿明显
为什么开关关闭时背景色没变？:checked 影响范围搞错了
很多人只改了 ::after，却忘了开关底轨（track）也需要随状态变色。iOS 默认关闭是浅灰（#e3e3e3），开启是蓝（#007aff）。这个颜色必须作用在 label 上，而不是 input。
- 底轨颜色由
label的background控制，未选中时设为#e3e3e3，选中时用input:checked + label覆盖 - 若用
border-radius: 16px做圆角，必须同时加在label上，否则滑块移出边界 - 移动端点击热区太小？给
label加min-width: 52px;和min-height: 32px;，避免 iOS Safari 缩小点击区域
真机上滑动不跟手？别忽略 -webkit-appearance: none 和触摸事件
iOS Safari 对表单控件有默认样式和 touch 行为劫持，不重置会导致点击延迟、滑动卡顿甚至伪元素消失。
- 必须给
input[type="checkbox"]加-webkit-appearance: none;，否则某些版本 Safari 会强制渲染原生样式 - 加
touch-action: manipulation;到label，减少 300ms 点击延迟 - 如果用户尝试“拖动”开关（非点按），纯 CSS 无法响应 —— 这是浏览器限制，
:checked只响应 click/tap，不响应 drag。需要 JS 才能做拖拽式开关，但那就超出本方案范围了 - 测试时用真机 Safari，模拟器可能不触发
touch-action或渲染偏差
最易被忽略的是：滑块的 z-index 必须高于底轨，否则开启状态下会被 label 背景色盖住；还有，所有尺寸单位统一用 px，避免 rem/vw 在不同缩放下导致位移计算失准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
