CSS 开关生成器
将原生复选框调整为开关，检查交互状态并复制带键盘焦点环的代码。
实时预览
原生复选框状态
每个预览都是与标签关联的原生复选框。使用 Tab 和空格键查看键盘行为及可见焦点轮廓。
使用步骤
如何使用
- 设置轨道宽度、高度、圆角、外边距、过渡速度和三种颜色。
- 查看各状态，并使用 Tab 和 Space 操作真实输入框。
- 复制复选框、标签 HTML 和 CSS，并替换示例标签与 id。
由复选框提供行为
控件是移除外观的 input type=checkbox，不是可点击 div 或隐藏替代品。它可聚焦、可用 Space 操作，向辅助技术报告选中和禁用状态，并参与表单。选项立即生效时适合用视觉开关；标签应清楚说明设置。
尺寸与移动规则
轨道宽度和高度决定尺寸。滑块为轨道高度减 6px，两侧各留 3px。编辑器确保宽度至少比高度大 6px；选中时移动量为宽度减高度，使滑块到达另一端。请按界面实际尺寸检查。
焦点、禁用状态与本地输出
CSS 保留 :focus-visible 轮廓。禁用控件仍可见、不能更改，并以较低不透明度作为辅助提示。预览和代码生成都在浏览器中进行，不会上传设计、颜色或代码。请在自己的场景中确认对比度、目标尺寸、表单行为和文案。
常见问题
你可能还想知道
开关和复选框不同吗？
开关通常是标签描述立即生效设置的复选框，底层仍有两种状态。交互和文案应符合产品；生成器不会决定是否需要单独保存。
可以移除焦点轮廓吗？
除非提供另一个清晰焦点提示，否则不要移除。键盘用户需要看到按 Space 会改变哪个开关。
滑块为什么移动宽度减高度？
滑块比轨道高度小 6px，两侧各内缩 3px。移动轨道宽度与高度之差即可到达另一端内缩位置。
输出含可访问名称吗？
示例用匹配的 id 和 for 关联输入框与标签。请替换为清楚的设置名称，多个开关时保证 id 唯一。