开关按钮生成器

工具介绍

CSS 开关按钮本质上是一个被样式化成物理开关外观的 checkbox——胶囊形的轨道配一个从一侧滑到另一侧的圆形滑块。它底层仍然是一个真实的 checkbox 输入框，这一点很重要：它保证了控件可以用键盘操作、能被屏幕阅读器识别，也能正常参与表单提交，而不像纯用可点击的 div 拼出来的开关那样有这些缺陷。

这个工具帮你搭好了这套结构：一个隐藏的 checkbox、一个根据 :checked 状态变色的轨道，以及一个用 CSS transform 滑动的滑块。拖动滑块和颜色选择器调整参数，点击预览测试真实的切换动画，然后把 CSS 和它依赖的最小 HTML 结构一起复制走。

来源：WAI-ARIA Authoring Practices, W3C ——建议用真实的 checkbox 输入框作为 switch 控件的无障碍基础，这也是这个生成器的输出始终保留底层 input 元素的原因。

为什么使用它？

• 预览是一个真正可点击的开关，不是静态图片——用之前就能测试实际的动画效果。
• 同时输出 CSS 和 CSS 所依赖的无障碍 HTML 结构（checkbox 输入框 + label）。
• 轨道宽高、关闭状态颜色、开启状态颜色、滑块颜色、圆角和过渡速度全部可调。
• 使用标准的 checkbox + :checked 选择器写法，开关保持键盘可导航，也能在真实表单里正常工作。
• 全部在浏览器本地计算，你调整的任何参数都不会上传。
• 免费、不用注册，手机上也能用。

使用方法

1. 设置宽度和高度来确定轨道大小——滑块会自动按内边距适配大小。
2. 选择关闭状态（未勾选）的轨道颜色，以及切换到开启状态时的颜色。
3. 选一个滑块颜色——白色或浅色中性色通常和轨道对比度最强。
4. 把圆角设为 50% 得到经典的胶囊形开关，调低则变成微圆角的矩形。
5. 调整过渡速度来控制滑块滑动和轨道变色的快慢。
6. 点击预览里的开关确认动画效果满意，再把 CSS 和 HTML 复制到项目里。

示例

输入

宽度：52px · 高度：28px · 关闭颜色：#cbd5e1 · 开启颜色：#ea580c · 圆角：50% · 速度：200ms

输出

.switch input:checked ~ .track { background-color: #ea580c; }
.switch input:checked ~ .track .thumb { transform: translateX(24px); }

这段代码是整个模式的核心：checkbox 的 :checked 状态配合通用兄弟选择器（~），同时驱动了轨道背景色的变化和滑块的滑动距离。

为什么用 checkbox 而不是加点击事件的 div

用两个 <div> 加一段点击时切换 class 的 JS 来做开关很诱人，但这种做法通常会破坏键盘导航、屏幕阅读器播报和表单提交——而一个真正的 checkbox 天然就能同时支持这三者。这个工具生成的写法保留了 <input type="checkbox"> 作为真正的交互元素（视觉上隐藏但依然可以获得焦点），并且完全用纯 CSS（不用任何 JavaScript）根据 checkbox 原生的 :checked 状态来控制轨道和滑块的样式。

常见的开关样式

• 经典胶囊开关：圆角设为 50%，尺寸适中（宽 48–56px），开关状态之间颜色变化明显。
• 设置面板风格开关：尺寸偏小（宽 36–44px），关闭态用低调的浅灰色，开启态用品牌色。
• 微圆角开关：圆角设在 20–30% 左右而不是完全胶囊形，看起来更方正、更像 App 里的开关。
• 轻快的开关：过渡速度设在 100–150ms，切换感觉迅速利落。
• 从容的开关：过渡速度设在 300–400ms，切换感觉更顺滑更精致，适合单个比较重要的设置开关。

配合其他 CSS 工具一起用

生成的轨道和滑块本身就用到了 border-radius，如果想要滑块之外更细致的圆角变化（比如每个角不同），可以用「圆角生成器」单独调整每个角再粘贴进来。「盒阴影生成器」也很适合给滑块加一点柔和的阴影，增加立体感。

→ 圆角生成器 · 盒阴影生成器

常见问题