纯CSS实现iOS滑动开关需用checkbox+label结构，通过伪元素模拟滑块与轨道，仅过渡transform和background-color，确保可访问性、点击响应及动画性能。
怎么用纯CSS实现iOS风格滑动开关
能，而且不需要任何JavaScript。核心是利用 input[type="checkbox"] 的隐藏状态 + label 关联 + ::before/::after 伪元素模拟滑块和轨道。关键不是“画得多像”，而是“点击区域够大、状态切换即时、视觉反馈明确”。
为什么 checkbox + label 是唯一靠谱方案
因为只有原生 input[type="checkbox"] 能天然绑定可访问性（aria-checked、键盘空格切换）、表单提交、以及被屏幕阅读器识别。用 div + click 模拟会掉进焦点管理、语义缺失、表单丢失的坑里。
- 必须用
label包裹input或设置for属性，否则点击轨道无法触发状态切换 -
input必须放在label内部或紧邻，且不能设display: none（会切断可访问性），推荐用position: absolute; opacity: 0; pointer-events: none; - 不要给伪元素加
transition: all，只过渡transform和background-color，避免重排重绘卡顿
常见错误：滑块偏移不对、点击无响应、iOS上拖拽失效
这些基本都源于三个地方没对齐：DOM结构、CSS选择器权重、移动端事件穿透。
- 滑块位置错乱 → 检查
label的position: relative是否漏写，以及::after的left值是否基于父容器宽度计算（iOS Safari对百分比计算更严格） - 点击没反应 → 确认
input没被z-index盖住，且label的pointer-events没误设为none - iOS拖拽失效 → iOS Safari 默认禁用非表单元素的拖拽行为，但 checkbox 本身不支持拖拽；所谓“滑动”其实是快速点击+惯性视觉错觉，真要拖拽需 JS，纯 CSS 就老老实实做“点按切换”
兼容性与性能要注意的细节
Android 4.4+、iOS 8+、Chrome 26+ 都没问题，但老版本 iOS 对 transform: translateX() 的硬件加速支持不稳定。
立即学习“前端免费学习笔记（深入）”；
- 滑块动画用
transform: translateX()，别用left，否则低端机掉帧 - 轨道背景色用
background，别用box-shadow模拟，iOS Safari 渲染阴影有毛边 - 开启
will-change: transform在::after上可提升滑块动画流畅度，但别滥用，仅限高频动画元素 - 如果项目要支持 dark mode，别用固定色值，改用
CSS custom properties，比如--switch-bg-on: #007aff
最常被忽略的是 focus 样式——很多人去掉 outline 后忘了加自定义焦点环，导致键盘用户无法感知当前开关位置。这点在真实项目里一测就露馅。
