纯CSS开关按钮必须用<input type="checkbox">+<label>结构，推荐<label><input></label>嵌套方式；input需设position: absolute; opacity: 0; pointer-events: none以保障可访问性，禁用display: none。
开关按钮的HTML结构怎么写才方便控制样式
纯CSS实现开关按钮，关键在于用 <input type="checkbox"> 作为底层控制，再用 <label> 包裹它来扩展点击区域。不要用 div + JS 模拟状态，那样会丢失原生可访问性和表单提交能力。
- 必须把
<input>放在<label>内部，或通过for属性绑定，否则点击轨道无法触发切换 -
<input>要加class="switch-input"（或其他自定义类），后续用属性选择器input[type="checkbox"]精准隐藏它 - 不要给
<input>设display: none，而要用position: absolute; opacity: 0; pointer-events: none—— 否则 Safari 下部分辅助技术可能跳过它
<label class="ios-switch"> <input type="checkbox" class="switch-input"> <span class="switch-track"></span> <span class="switch-thumb"></span> </label>
如何用CSS还原iOS控制中心的滑动轨迹和圆钮
iOS控制中心开关的核心视觉特征是：轨道略带圆角、背景色随状态变化（关=浅灰、开=亮蓝）、圆钮有轻微阴影和位移动画。这些不能靠单个 background 实现，得拆成两层。
-
.switch-track负责绘制轨道：设固定宽高（比如width: 52px; height: 32px;），border-radius: 16px，默认背景用#c7c7cc（iOS系统浅灰） -
.switch-thumb是绝对定位的圆钮：width: 28px; height: 28px; border-radius: 50%; background: #fff;，加box-shadow: 0 2px 4px rgba(0,0,0,0.15)模拟微阴影 - 开启状态用
.switch-input:checked ~ .switch-track改轨道背景为#007aff（iOS蓝），同时用.switch-input:checked ~ .switch-thumb把圆钮transform: translateX(20px)（20px = 轨道宽 - 圆钮宽）
注意：iOS轨道高度是32px，圆钮直径28px，留出2px上下边距，这个比例关系一错，滑动就“飘”。
为什么:hover和:focus样式必须单独处理
iOS原生开关没有悬停态，但网页需要可访问性支持。如果只写 :checked，键盘用户按 Tab 进入时看不到焦点框，屏幕阅读器也难识别当前控件。
立即学习“前端免费学习笔记（深入）”；
- 给
.switch-input:focus + .switch-track加outline: 2px solid #007aff; outline-offset: 2px;，确保焦点可见 -
.ios-switch:hover .switch-track可以轻微提亮轨道背景（比如filter: brightness(1.05)），但别加动画——否则和:checked的 transition 冲突 - 绝对禁止对
.switch-thumb单独写:hover，它不是交互主体，所有交互应落在label或input上
常见错误：用 transition: all 0.2s 在 .switch-track 上——这会让 outline 也过渡，造成焦点框延迟出现，违反 WCAG 2.4.7。
移动端点击区域太小怎么办
iPhone控制中心开关实际点击热区远大于视觉尺寸，网页上常因 label 没撑满导致点不中。
- 给
.ios-switch设display: inline-flex; align-items: center;，再加min-width: 52px; min-height: 32px; - 关键：给
.switch-input的position: absolute加inset: 0（或top: 0; left: 0; right: 0; bottom: 0），让它完全覆盖父容器，而不是只覆盖自身默认尺寸 - 如果嵌在 flex 容器里，记得检查父级是否设了
align-items: flex-start——这会让label高度塌陷，热区变窄
最易忽略的一点：iOS Safari 对 pointer-events: none 在 input 上的支持不稳定，某些版本下会导致点击失效。稳妥做法是保留 opacity: 0，但确保 z-index 足够高，且父级没设 overflow: hidden 裁掉热区。
