可通过CSS重构checkbox实现滑动开关，包括遮罩式（伪元素+transition）、Flex布局式（子元素+box-shadow）、自定义属性式（主题可配）及无障碍增强式（ARIA+语义化），均无需JS即可完成状态切换与视觉反馈。
如果您希望在网页中实现一个美观且交互友好的滑动开关控件，HTML5本身不提供原生滑动开关元素，但可通过<input type="checkbox">结合CSS样式与伪元素进行视觉重构。以下是基于纯HTML5与CSS实现滑动开关的多种制作方法：
一、基础CSS遮罩式滑动开关
该方法利用checkbox的:checked状态驱动
1、在HTML中定义一个隐藏的checkbox和与其关联的label，label的for属性值需与checkbox的id一致。
2、为checkbox添加position: absolute; opacity: 0;使其不可见但保持可交互性。
立即学习“前端免费学习笔记（深入）”；
3、为label设置相对定位，并在其内部用::before绘制轨道，用::after绘制滑块，两者均设transition: all 0.3s ease;。
4、当checkbox被勾选时，在input:checked + label::after中修改transform: translateX(24px);（假设轨道宽52px，滑块宽24px）以实现右滑效果。
5、为label添加cursor: pointer;提升点击友好性，并确保滑块background-color在两种状态下有明显区分，例如未选中为#ccc，选中为#4CAF50。
二、Flex布局+box-shadow滑动开关
此方案放弃伪元素，改用真实子元素构建轨道与滑块，通过flex容器控制对齐，利用box-shadow扩展滑块视觉尺寸，并借助transform平移实现滑动，结构更直观、易于调试。
1、HTML中使用
2、将包含元素设为display: flex; align-items: center;，轨道设固定宽高与圆角，背景色为#e0e0e0。
3、滑块设width: 20px; height: 20px; border-radius: 50%; background: white; box-shadow: 0 2px 4px rgba(0,0,0,0.2);。
4、checkbox设position: absolute; opacity: 0;，并为其:checked状态绑定相邻兄弟选择器input:checked ~ .thumb，应用transform: translateX(32px);（根据轨道内边距与宽度计算偏移量）。
5、为整个容器添加padding: 4px;确保滑块在边界内平滑移动，避免溢出。
三、CSS自定义属性驱动动态滑动开关
利用CSS自定义属性（--switch-bg、--thumb-bg等）配合:root作用域与:checked状态动态赋值，实现主题可配置、无需重复写多套样式，适合需要亮/暗双模式的项目。
1、在:root中定义默认变量，如--switch-track-off: #bdbdbd;、--switch-track-on: #2196F3;、--switch-thumb: #fff;。
2、为label设置background-color: var(--switch-track-off);，滑块background-color: var(--switch-thumb);。
3、在input:checked + label中重置--switch-track-off: var(--switch-track-on);，并同步更新滑块位置的transform值。
4、为所有过渡属性统一启用transition: background-color 0.25s, transform 0.25s;，确保颜色与位移同步响应。
5、通过JavaScript仅在必要时向document.documentElement设置dataset，例如切换主题时执行document.documentElement.style.setProperty('--switch-track-on', '#9C27B0');，但交互本身仍由CSS驱动。
四、无障碍增强型滑动开关
在满足视觉交互的同时，确保屏幕阅读器能准确传达控件功能与当前状态，符合WCAG 2.1 AA标准，关键在于ARIA属性与语义化标签的正确组合。
1、为checkbox添加aria-label="启用夜间模式"或aria-labelledby指向外部可见文本节点。
2、label内嵌文本内容（如“开启”、“关闭”）并设aria-hidden="true"，避免重复播报；同时用span.sr-only提供仅屏幕阅读器可见的状态提示。
3、为label添加role="switch"与aria-checked="false"，并在JS监听change事件时同步更新aria-checked值（注意：纯CSS方案无法自动更新该属性，需轻量JS补全）。
4、确保焦点可见，为input:focus + label添加outline: 2px solid #4D90FE;及outline-offset: 2px;。
5、滑块位移距离须满足最小触控尺寸要求，整体控件点击区域不小于44×44px，可通过label的padding保障。
