CSS 复选框生成器
生成自定义样式的 CSS 复选框或切换开关 — 选择样式、颜色、大小、圆角半径和动画速度，然后复制现成的 CSS + HTML。纯 CSS，键盘无障碍，无需 JavaScript。
输入
框的高度。切换开关样式的宽度是高度的 1.8 倍。
用于选中状态和键盘焦点环。
未选中时的边框颜色 — 切换开关样式的轨道颜色。
勾号、叉号或切换旋钮。轮廓样式会忽略此项，并以强调色绘制勾号。
适用于方形样式。填充圆形和切换开关始终完全圆形。
选中/取消选中过渡的长度 (0.05-1s)。
在 HTML 代码段中复选框旁边显示。留空以获得裸控件。
为每个生成的 class 添加命名空间，以防 CSS 与您的样式表冲突。
输出
您的复选框将显示在此处。
实际生成的复选框，隔离在 Shadow DOM 中 — 点击查看动画。
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-checkbox-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"style": "filled",
"size": "24",
"accentColor": "#2563eb",
"borderColor": "#9ca3af",
"checkColor": "#ffffff",
"radius": "6",
"duration": "0.2",
"labelText": "I agree to the terms",
"classPrefix": "io"
}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-checkbox-generator` tool (CSS Checkbox Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-checkbox-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 复选框生成器可构建自定义样式的复选框 — 或切换开关 — 作为独立的 CSS + HTML 代码段。选择样式、设置颜色、大小、圆角半径和动画速度，然后直接将两个代码块复制到您的项目中。一切都是纯 CSS：无 JavaScript、无图标字体、无 SVG 精灵、无任何依赖。
它设置真实复选框的样式，而非虚假复选框
大多数自定义复选框代码段将原生 <input> 隐藏在屏幕外，并在其旁边绘制一个 <span>。这在视觉上可行，但会丢弃浏览器免费提供的所有内容。此生成器改为在真实 <input type="checkbox"> 上设置 appearance: none，并使用 ::before / ::after 伪元素绘制框、勾号和切换旋钮。
实际区别：该控件仍然可以通过 Tab 键获得焦点，仍然可以通过空格键切换，仍然随周围表单提交其值，并且仍然由屏幕阅读器宣布为复选框 — 无需额外的标记或 ARIA。
每个生成的样式表还包括三项内容，复制粘贴复选框通常会忽略：
- 您的强调色中的
:focus-visible环，以便键盘用户可以看到他们的位置； :disabled状态（暗淡，not-allowed光标）；- 一个
@media (prefers-reduced-motion: reduce)块，可为请求系统减少运动的用户关闭过渡和弹跳动画。
六种样式
- 填充方形 — 经典：有边框的方形，用强调色填充并显示从旋转边框绘制的勾号。
- 轮廓 — 方形保持透明；只有边框和勾号采用强调色。适合暗色或繁忙背景。
- 填充圆形 — 完全圆形方形中相同的填充和勾号行为。
- 切换开关 — 药丸形轨道，选中时旋钮滑过。标记仍然是复选框，因此在表单中可直接使用。
- 果冻弹跳 — 填充方形，选中时具有挤压和拉伸
@keyframes弹跳动画。 - 叉号标记 — 用强调色填充，并使用 ✗ 而非 ✓ 标记，适用于"排除"或"删除"语义。
如何使用它
- 选择复选框样式。
- 设置大小 — 框的高度（像素）。切换开关的宽度自动是其高度的 1.8 倍。
- 选择三种颜色：强调色（选中状态和焦点环）、未选中颜色（静止时的边框或切换轨道）和复选标记（勾号、叉号或旋钮）。
- 为方形样式调整圆角半径，为选中/取消选中过渡调整动画时长。
- 设置标签文本，如果您的项目已使用通用 class 名称，则设置 Class 前缀 — 每个生成的 class 都会使用它进行命名空间，以防规则与您现有的样式表冲突。
- 将 CSS 复制到您的样式表中，将 HTML 复制到您的标记中。
常见问题
这在 <form> 内仍然可行吗?
是的。被设置样式的元素 就是 复选框，因此它以与未设置样式的复选框完全相同的方式发送其 name 和 value。将 name="..." 添加到生成的标记中的 <input>。
如何在一个页面上使用多个？
粘贴一次 CSS，并根据需要重复使用 <label> 标记 — 规则是基于 class 的，而非基于 ID 的。对于一个页面上的两种不同外观，使用不同的 Class 前缀 生成第二种样式。
为什么轮廓样式会忽略复选标记颜色？ 轮廓样式故意保持方形透明，以防白色勾号在明亮页面上不可见。该样式总是以强调色绘制其勾号。
圆角半径对圆形或开关有效吗？ 不有效 — 两者在设计上总是完全圆形的。半径适用于填充方形、轮廓、果冻弹跳和叉号标记。
这个工具会上传任何内容吗？ 不会。代码段是从您选择的值在浏览器中生成的；没有任何内容发送到服务器或保存。
相关工具
需要其他表单或组件 CSS？CSS 加载动画生成器 构建匹配的纯 CSS 加载动画，CSS 盒阴影生成器 帮助您设置表单所在卡片的样式，CSS 关键帧动画生成器 是编写定制勾号动画的地方。要在部署前缩小完成的样式表，请通过 CSS Minifier & Beautifier 运行。