🎚️
开关按钮生成器
生成纯 CSS 的 iOS 风格开关(toggle switch)，自定义颜色尺寸，复制 HTML+CSS。
本地处理 · 不上传
加载工具中…
相关：toggle · 开关 · switch · 按钮 · css
开关按钮生成器生成纯 CSS 的开关控件样式，可调尺寸、颜色与动画，基于原生 checkbox 实现，保留完整的键盘与无障碍支持。
使用步骤
- 调整尺寸与开关状态颜色
- 设置滑动动画时长
- 预览交互效果
- 复制 HTML 与 CSS
使用场景
- 设置页面的开关选项
- 替代样式生硬的原生复选框
- 制作深色模式切换控件
- 表单中的布尔值输入
小贴士
- 务必基于原生 checkbox 实现并把它视觉隐藏，而不是用 div 模拟——前者天然支持键盘操作、表单提交与屏幕阅读器。
- 视觉隐藏要用裁剪而非 `display:none`，后者会让元素完全无法聚焦，键盘用户就操作不了了。
- 开关的两个状态必须有颜色之外的区分（如位置、图标），仅靠颜色区分对色觉障碍用户不友好。
常见问题
为什么要用 checkbox 而不是 div？
原生 checkbox 自带键盘支持（Tab 聚焦、空格切换）、能被表单提交、屏幕阅读器会正确播报状态。用 div 模拟这些都要手工补，且很难补全。
怎么隐藏原生样式？
用 `appearance: none` 或把它绝对定位后用 clip 裁剪，然后用相邻的伪元素或 span 画出开关外观。切忌用 display:none，那会让它失去焦点能力。
开关和复选框怎么选？
开关表示立即生效的状态切换（如开启通知），复选框表示提交时才生效的选择项。语义不同，不要仅因为好看就全都换成开关。
开关按钮生成器是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用开关按钮生成器，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。