纯css实现switch开关需保留原生checkbox语义和交互能力，正确做法是用position: absolute; opacity: 0; pointer-events: none隐藏而非display: none，并通过label关联；结构应为label > input + span，配合:checked伪类控制样式，同时适配移动端触控与深色模式。
纯 CSS 实现的自定义 <input type="checkbox"> 开关（俗称 switch）是前端高频需求，但直接用 appearance: none 重置后，必须手动处理可访问性、焦点状态和键盘交互——否则就是个“好看但残障用户无法操作”的半成品。
为什么不能只靠 display: none 隐藏原生 checkbox
隐藏原生控件本身没问题，但若不保留其语义和交互能力，会导致：
• 屏幕阅读器完全忽略该控件，aria-label 也救不回来
• 键盘 Tab 无法聚焦，Space 无法切换状态
• iOS Safari 中点击 label 可能失效（尤其配合 pointer-events: none 时）
• 浏览器自动填充或表单验证逻辑丢失
正确做法是用 position: absolute; opacity: 0; pointer-events: none; 移出视觉流，但保留在 DOM 和可访问树中。再用 label 关联它（通过 for 或嵌套），所有交互都落在 label 上。
switch 样式的核心结构必须是 label > input + span
这是最稳定、兼容性最好、语义最清晰的写法。不要用 JS 绑定 click 模拟，也不要给 input 加 onclick——原生 checkbox 的状态同步、表单提交、:checked 伪类全靠这个结构驱动。
关键点：
• input 必须紧跟在 label 内部或通过 for 显式绑定
• span（或 div）作为滑块容器，用 input:checked + span 控制位置/颜色
• 滑块本体（inner dot）建议用 span::before，避免多一层标签
<label class="switch"> <input type="checkbox" name="notify" value="1"><span class="slider"></span> </label>
CSS 中用 .switch input:checked + .slider 触发样式变化，比 JS 监听更轻量、无竞态、服务端渲染友好。
移动端点击区域小、拖拽误触多，必须加 touch-action: manipulation
iOS 和 Android Chrome 对 checkbox label 的点击响应有延迟或吞没，尤其当 label 内有 padding 或 border-radius 时。常见现象：
• 点击开关无反应，要连点两下才生效
• 拖动时意外触发页面滚动
• 在微信 WebView 中完全失灵
解决方式：
• 给 label.switch 设置 touch-action: manipulation
• 确保 label 的 min-height ≥ 44px（iOS 最小触控区）
• 避免对 input 或 span 单独设 touch-action: none —— 会切断事件冒泡
• 不要用 cursor: pointer 代替可点击语义，它对屏幕阅读器无效
深色模式适配不是加个 @media (prefers-color-scheme: dark) 就完事
单纯改背景色容易翻车：滑块边缘发虚、文字对比度不足、禁用态看不出来。真正要做的：
• 把开关的「轨道」和「滑块」颜色拆成独立 CSS 变量，例如 --switch-track-on、--switch-thumb-off
• 在 :disabled 状态下，同时降低轨道透明度 + 灰化滑块 + 移除阴影，而不是只改 opacity
• 检查 :focus-visible 轮廓色是否在深色背景下仍可见（推荐用 outline: 2px solid var(--focus-color)，而非默认蓝色）
• 如果项目用 CSS-in-JS 或 Tailwind，确保变量注入顺序不会被深色模式覆盖（比如 data-theme="dark" 要作用于 根节点）
别忘了测试：系统设深色 + 浏览器强制浅色（Chrome DevTools Rendering 面板），这种混合场景下变量是否仍生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
