CSS 复选框生成器

工具介绍

浏览器默认的复选框在每个浏览器里长得都不一样，也很难直接用 CSS 改样式，因为它的外观是由操作系统绘制的，而不是普通 CSS。标准做法是把原生复选框视觉上隐藏起来，用它旁边的一个兄弟元素来呈现样式，靠复选框的 :checked 状态驱动——输入框本身依然完全可用、可访问，改变的只是外观。

这个工具为三种常见复选框样式实现了这个模式：带动画对勾的圆角方框、类似 iOS 的滑动开关，以及实心圆点（类似单选按钮）样式。点击预览里的复选框可以看到选中状态，调整尺寸和强调色后复制 CSS。

来源：Selectors Level 4, W3C——定义了这项技术所依赖的 :checked 伪类的规范。

为什么使用它？

• 实时可点击预览——点一下复选框就能看到选中和未选中两种状态的实际效果。
• 一个工具里提供三种常用样式：对勾方框、开关滑块、实心圆点。
• 底层元素依然是真正的 <input type="checkbox">，键盘操作、表单提交、屏幕阅读器都能正常工作。
• 尺寸和强调色可调节，直接生成到 CSS 数值里，不用自己再去替换变量。
• 不需要图标字体、SVG 文件或图片——对勾和滑块都是用普通的 CSS 边框和伪元素画出来的。
• 免费，浏览器本地运行，不用注册。

使用方法

1. 选择样式：圆角对勾、开关滑块或实心圆点。
2. 拖动尺寸滑块放大或缩小复选框。
3. 选一个强调色——它会成为选中状态的背景色和边框色。
4. 点击预览面板里的复选框，确认选中和未选中两种状态看起来都没问题。
5. 把生成的 CSS 复制到样式表里，套用在按预览同样结构包裹的任意 <input type="checkbox"> 上。

示例

输入

样式：圆角对勾 · 尺寸：24px · 颜色：橙色

输出

.css-checkbox .mark {
  width: 24px;
  height: 24px;
  border: 2px solid #f97316;
  border-radius: 5px;
}

.css-checkbox input:checked + .mark {
  background: #f97316;
}

复选框输入元素被视觉隐藏；实际显示的方框是一个受输入框 :checked 状态驱动的兄弟 <span>，选中后会画出一个旋转的小边框作为对勾。

为什么隐藏原生复选框而不是直接去掉它

很容易想到干脆不用真正的 <input>，用一个带点击事件的 <div> 从头画一个复选框，但这样会白白丢掉键盘支持、表单提交和屏幕阅读器语义。这个工具生成的模式保留了真实的复选框输入元素——只是用 opacity: 0 之类的方式在视觉上隐藏并重新定位——所以在所有重要的地方浏览器依然把它当成一个真正的复选框，而外观由旁边的兄弟元素负责呈现。

三种样式一览

• 圆角对勾：最常见的「方框+对勾」样式，多用于表单字段、协议勾选和多选列表。
• 开关滑块：给人的感觉更像即时开关的设置项，而不是表单字段——更适合用在偏好设置界面，而不是复选框列表。
• 实心圆点：一种简约的、类似单选按钮的外观，当方框在周围圆润的界面元素里显得太生硬时可以用它。

和界面其他部分搭配

生成的强调色只影响选中状态——可以用和品牌色或按钮色一致的颜色，让复选框和页面其他部分保持统一。再配合界面里其他地方用的圆角大小，观感会更协调。

→ 圆角生成器 · 颜色选择器

常见问题