Softonic

CSS 复选框生成器

步 1 / 2
结果

默认复选框在每个操作系统上看起来都不一样，而且很难重新设置样式。本生成器创建纯 CSS，让原生复选框呈现你想要的样式：选择勾选状态的颜色、边框颜色、尺寸和圆角。由于样式应用于真实的 input 元素，键盘操作、屏幕阅读器和表单提交都能继续正常工作。复制生成的 CSS 并添加到样式表中。

如何设置复选框样式

  1. 1

    选择颜色

    选择勾选状态的背景色和方框的边框色。

  2. 2

    设定尺寸

    在 12 到 48 px 之间选择尺寸。

  3. 3

    设定形状

    选择方框的圆角，最大 20 px。

  4. 4

    复制 CSS

    预览对勾，然后将生成的规则复制到样式表中。

生成的 CSS 有什么作用

规则通过 appearance: none 直接应用到 input 上，移除默认外观，从而可以自由设置方框样式：

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

复选框被勾选时，方框会填充所选颜色，并出现一个用 CSS 绘制的白色对勾：

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

为什么使用原生 input

这个样式永远不会把元素替换成 div：真正的 <input type="checkbox"> 会保留键盘勾选、屏幕阅读器支持和表单提交。appearance: none 只改变外观。如果需要支持旧版 Safari，请在规则中加上 -webkit-appearance: none。

焦点与悬停

生成的规则包含平滑的颜色过渡，但没有悬停或焦点样式。请自行添加 :hover 和 :focus-visible 规则，让键盘用户始终能看到焦点位置，例如在方框周围加上彩色轮廓。

对勾

对勾是一条旋转 45 度的白色小线段。如果需要其他颜色，或更细、更粗的线段，请修改 ::after 规则中的 border 和 border-width 值。

常见问题

不会，它只输出 CSS。请将类应用到表单中真实的 input 元素上，可以带可见标签，也可以不带。

能。规则只是在原生 input 上使用 appearance: none，所以值会正常提交，键盘和屏幕阅读器支持也保持不变。

尺寸在生成器中设置，范围为 12 到 48 px。对勾的颜色和粗细在生成 CSS 的 ::after 规则中修改。

对于触摸目标，至少使用 24 px，最好与其他控件一样达到 44 px。设计中让方框与标签文字对齐。

相关工具

ASCII 表参考

完整 ASCII 表，覆盖 0 到 127；列出每个代码的十进制、十六进制、八进制、二进制值和 HTML 数字字符引用写法，包括 NUL、LF、DEL。

HTML 字符参考

可搜索的 HTML 实体列表，含命名代码与数值代码，并支持一键复制特殊字符和符号。

键盘快捷键参考

搜索 macOS、Windows 和 Linux 上 VS Code、Chrome 以及使用 GNU Readline 的 Bash 的文档默认快捷键。

电话号码验证器

根据各国号码规划检查结构，并显示地区、类型以及E.164、国际、国内和RFC 3966格式。

变更日志生成器

根据分类条目生成 Keep a Changelog 风格的 Markdown 部分。将条目粘贴到 Added、Changed、Fixed 和 Removed 下，选择 Markdown 或纯文本，然后复制输出。

cURL 命令生成器

根据 HTTP URL、请求头、认证、JSON、原始数据或表单字段，在浏览器中私密生成适用于 POSIX Shell 或 PowerShell 的 cURL 命令。

此工具还提供其他语言版本