直接用画不出ios开关，因浏览器ua样式强制限制宽高圆角等属性，且appearance: none兼容性差；必须用label包裹input，通过::before/::after伪元素实现轨道与滑块，并用transform: translatex()配合状态选择器控制位移与动画。
为什么直接用 <input type="checkbox"> 画不出 iOS 开关
浏览器对 <input type="checkbox"> 的 UA 样式强制限制太死：你设 width、height、border-radius，Chrome 和 Safari 大概率忽略；强行加 appearance: none 在 IE 完全不生效，Firefox 需要 -moz-appearance，Safari/Chrome 要 -webkit-appearance——但即便清掉，它仍是不可定位的内联元素，没法当滑块容器用。iOS 开关的核心视觉（圆角轨道 + 圆形滑块 + 状态色变 + 平滑位移）必须靠真实 DOM 元素或伪元素承载。
label 包裹 input 是唯一可靠起点
结构必须是 <label><input type="checkbox"></label> 或 <label for="xxx"></label><input id="xxx" type="checkbox">。否则点击 label 不触发状态切换——这是 90% 初学者卡住的第一步。
-
input必须保留，它是唯一可信的状态源；不能用div+click模拟，否则键盘Space无法切换、屏幕阅读器读不出“已选中” -
input隐藏方式只能是position: absolute; opacity: 0; pointer-events: none;—— 用visibility: hidden或display: none会丢失焦点和可访问性 -
label要设position: relative;，否则内部::before/::after无法精确定位轨道和滑块
用 ::before 画轨道、::after 画滑块，transform: translateX() 控制位移
把 label::before 当轨道（背景色+圆角），label::after 当滑块（白色圆点），用 input:checked + label::after 触发位移。关键不是“动”，而是“怎么动得顺”：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 滑块位移必须用
transform: translateX()，别用left——后者触发布局重排，Safari 上拖拽卡顿明显 - 务必加
will-change: transform;在滑块上，iOS Safari 15.4+ 才会提升渲染层，避免滑动生硬 - 轨道宽度减去滑块宽度，就是
translateX()的目标值（例如轨道宽 60px、滑块宽 26px，则位移 34px） - 过渡动画只写
transition: background-color 0.3s, transform 0.3s;，别用all，否则颜色变化也会被缓动干扰
禁用态、深色模式、最小点击区这些细节容易漏
设计师给的 iOS 开关图稿里没写“禁用时灰阶多少”，但用户真点不到就会骂。实际交付时这几个点常被跳过：
- 禁用态必须同时处理：
input:disabled + label设opacity: 0.5;，且cursor: not-allowed;；光改label而不联动input，键盘仍能切状态 - 深色模式适配不能只靠
@media (prefers-color-scheme: dark)改颜色——要确保轨道未选中态在深色背景下仍有足够对比度（比如从#e0e0e0改成#424242） - iOS 规范要求最小点击区域 44×44px，所以
label的padding至少设8px，让视觉开关区虽小，但可点范围够大
滑块位移的像素值、轨道圆角半径、禁用态透明度——这些数值没有标准答案，得按设计稿量，但逻辑链不能断：状态源 → 可访问隐藏 → 伪元素驱动 → 性能友好动画 → 边界场景兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
