纯html+css可实现优雅、可访问、无js的开关按钮，核心是语义化checkbox+label绑定、伪元素美化、状态同步过渡及无障碍支持（键盘导航、读屏识别、焦点可见等）。
用纯 HTML + CSS 就能做出优雅、可访问、无 JS 的开关切换按钮（Toggle Switch），核心是利用 <input type="checkbox"> 的布尔本质，配合 <label></label> 关联和伪元素美化。
结构：语义化是优雅的前提
真正优雅的开关不是“画一个圆+滑块”，而是让屏幕阅读器、键盘导航、高对比度模式都能正确识别状态。必须使用原生 checkbox，并用 for 或嵌套方式绑定 label：
- ✅ 推荐写法（隐式关联，语义清晰）：
- ⚠️ 避免写法：脱离 label 的 div 模拟、仅靠 JS 切换 class 的“假 checkbox”——它们无法被 tab 键聚焦，也无法被读屏软件识别为控件。
CSS 美化：用伪元素打造细腻动效
隐藏原生 checkbox，用 ::before 和 ::after 构建轨道与滑块，关键在状态同步与过渡：
- 用
input:checked + .slider控制滑块位置（右移）和背景色变化； - 给
.slider加transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1)，比默认 linear 更有弹性； - 滑块阴影（
box-shadow）和轨道内边距（padding）提升层次感，避免扁平呆板； - 选中时轨道用品牌主色（如 #4CAF50），未选中用中性灰（如 #ccc），符合 WCAG 对比度要求。
可访问性增强：不只是“看起来像”
优雅不等于花哨，而是对所有用户一视同仁：
- 保留
input的name和id（即使没显式 for），方便表单提交和自动化测试； - 用
aria-checked属性（由浏览器自动同步）确保读屏软件播报“已开启/已关闭”； - 键盘支持：tab 进入后空格键直接切换，无需额外 JS；
- 焦点可见：为
.switch:focus-within .slider添加轻微外发光或轮廓线（outline），满足无障碍聚焦指示要求。
进阶细节：让开关真正“聪明”
小改动带来大体验提升：
- 添加
user-select: none防止误选文字； - 滑块尺寸略小于轨道高度（如轨道 28px，滑块 22px），留出呼吸感；
- 禁用状态（
input:disabled）需同步灰掉轨道、降低滑块不透明度，并移除 hover 效果； - 若需自定义文案（如“开/关”、“是/否”），放在 label 内文本中，而非伪元素里——保证可翻译、可缩放、可读取。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
