CSS 开关（Toggle Switch）生成器
调整大小和颜色并测试预览。代码使用真正的复选框，因此可用于表单，也支持键盘操作。
使用方法无需 JavaScript 的开关按钮
可用语言: 
广告
CSS 开关（Toggle Switch）生成器: 用途
开关按钮常用于偏好设置、注册表单和各类设置。这个生成器用真正的复选框加 CSS 样式制作开关，无需 JavaScript：它能保存状态，支持键盘和触摸，会随表单一起提交，并因 role=switch 而被屏幕阅读器播报为开启或关闭。
你可以调整宽度、高度、圆角和颜色，并测试开启、关闭和禁用状态。代码包含可见的焦点样式、尊重减少动态效果设置的平滑过渡，以及高对比度模式。
使用方法
- 调整大小和圆角。
- 选择颜色和标签文字。
- 复制 HTML 和 CSS。
使用场景
- 通知偏好设置。
- 网站的深色模式。
- 表单中的条款同意。
常见问题
需要 JavaScript 吗？
正常使用不需要。只有当你想在开关切换时执行操作（例如保存偏好）才需要，监听 input 的 change 事件即可。
在手机上用多大尺寸？
按 WCAG 2.2，触控区域至少应为 24×24 px，手指操作的推荐值接近 44 px。旁边的文字同样属于 label，会扩大可点击区域。
真的免费吗？
是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。