CSS切换开关生成器
生成纯CSS切换开关 — 使用:checked样式的真实复选框，无需JavaScript。设置大小、颜色、边框半径和动画速度，选择作用域类名，并复制无障碍的HTML + CSS。
输入
样式
限制在高度的一半。药丸形保持高值，正方形开关则设置为0。
颜色
轮廓样式忽略此项，按钮本身采用打开/关闭颜色。
行为和标记
对于偏好减少运动的访问者，将自动禁用。
生成的规则限定在此类中，因此不会与您自己的样式冲突。
没有可见标签的开关，请保持空白。
输出
您的切换开关将显示在此处。
真正生成的组件，隔离在Shadow DOM中 — 点击可查看动画。
您的切换开关将显示在此处。
上述两个状态的内联样式副本 — 方便模型使用。不交互。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-switch-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "track",
"width": "56",
"height": "32",
"borderRadius": "40",
"offColor": "#cbd5e1",
"onColor": "#22c55e",
"knobColor": "#ffffff",
"transition": "250",
"knobShadow": "true",
"className": "io-switch",
"labelText": "Enable notifications"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-switch-generator` tool (CSS Toggle Switch Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-switch-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS切换开关生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
此工具的作用
CSS切换开关生成器从真实的<input type="checkbox">和纯CSS创建iOS风格的切换开关。设置大小、颜色、角半径和动画速度，您将获得HTML、样式表以及关闭和打开两种状态的实时预览。
输出中没有JavaScript。交换机通过:checked相邻兄弟选择器切换，这意味着它使用键盘，与表单一起提交，并在无法设置样式的任何内容上降级为普通复选框。
如何使用
- 选择开关样式 — 请参阅下面，了解每个样式的变化。
- 设置宽度、高度和边框半径。对于药丸形保持半径高，对于正方形开关降低到0。
- 选择关闭、打开和按钮颜色。
- 设置动画持续时间，切换按钮阴影，然后给出类名。
- 将HTML复制到标记中，将CSS复制到样式表中。
三种样式
- 滑轨 — 按钮在滑轨内，缩进高度的八分之一。这是经典的iOS开关。
- 纤细 — 滑轨是一条细条，按钮比它更高，在上下方悬挂。这是Material Design形状。
- 轮廓 — 滑轨透明且具有彩色边框，按钮采用打开/关闭颜色本身。适合极简主义UI或深色模式。
其他一切 — 大小、颜色、半径、时间 — 适用于所有三种，因此任何一种都可以从其默认值大幅推开。
生成的开关是否可访问？
是的，这是生成的开关通常失败的地方。输出保持真实的可聚焦复选框（视觉上隐藏，从不display: none，这会将其从标签顺序中删除），添加role="switch"，绘制:focus-visible轮廓，以便键盘用户可以看到他们在哪里，设置:disabled状态的样式，并将动画包装在prefers-reduced-motion: reduce块中，为要求减少运动的访客关闭过渡。
CSS会与我现有的样式冲突吗？
每个选择器都限定在您选择的类名下，使用BEM风格的__input / __track / __label命名。什么都不针对裸元素，因此粘贴到现有样式表中不会影响其他任何内容。如果io-switch已被占用，请输入不同的名称，整个块将被重命名。
为什么预览是静态的？
预览将两种状态并排呈现，带有内联样式，以便您可以一目了然地比较它们。真正的:checked规则和::before伪元素不能在内联style属性中 — 交互式版本是您复制的HTML + CSS。
如果我需要除开关以外的东西怎么办？
对于简单的样式复选框或单选按钮，HTML复选框生成器生成标记。要微调形状，请使用CSS边框半径生成器，对于按钮的投影，CSS框阴影生成器提供了更多控制。选择一起能很好读出的打开/关闭颜色更容易使用颜色混合器。