写过表单的人都踩过这个坑——checkbox 颜色只能靠 appearance: none 重建，今天一行 CSS 把这件事彻底原生化了

写过表单的人都踩过这个坑——checkbox 颜色只能靠 appearance: none 重建，今天一行 CSS 把这件事彻底原生化了。

每次给表单里的复选框换个品牌色，工程师心里都要咯噔一下。旧方案是 appearance: none 然后从头重建：宽高、边框、背景、圆角、::after 画对勾、:checked 状态、:focus-visible、无障碍语义……一套下来五六十行，把键盘导航和屏幕阅读器支持全压在自己身上。结果设计师说「换个颜色」，你只能苦笑。

CSS accent-color 把这件事用一行代码彻底接管了。

Chrome 93 / Firefox 92 / Safari 15.4 就支持的属性，94% 全球覆盖率，到现在还被很多团队当成新东西介绍。你在用的是 2021 年就进入稳定版的功能。

/* 一行，全局生效 */
:root {
  accent-color: #7c3aed;
}

这一行同时控制四种元素的品牌色：checkbox 的勾选填充、radio 的选中圆点、range 的滑块轨道、progress 的进度条。浏览器自动算对比色，不用你手动指定前景色。

想更细粒度？直接写在具体元素上：

/* 按表单分区，不同区域不同色调 */
.signup-form {
  accent-color: #22c55e;
}

.danger-zone {
  accent-color: #ef4444;
}

/* 甚至可以给单个控件 */
input[type="checkbox"].brand {
  accent-color: var(--brand);
}

配合 color-scheme 用，暗色模式也自动适配：

:root {
  color-scheme: light dark;
  accent-color: #7c3aed;
}

浏览器会根据当前是亮色还是暗色，自动调整控件背景和边框的对比度，你的品牌色只管填充色，不用管背景。

什么时候用它足够，什么时候要重建

accent-color 只能改填充色，不能改边框、尺寸、圆角、动画，也不能控制未选中状态的颜色。如果你的设计需要渐变背景、特殊形状、或者进出场动画，还是得上 appearance: none 重建——但代价是浏览器原生的键盘导航、焦点管理、ARIA 语义全要自己接回来。

对于 90% 的业务表单，「换个品牌色」这个需求，一行 accent-color 就解决了。剩下的 10%，再用那五六十行重建代码。

下一步：把这行加到你的 root 里

现在打开 DevTools，在 :root 里加一行 accent-color: <你的品牌色>;，刷新页面，看看你的 checkbox 和 radio 是不是突然顺眼了。整个过程不超过三分钟。

然后记住这个属性叫 accent-color，不用再收藏任何「自定义 checkbox 完整指南」。