DigitalOcean 为您的旅程每个阶段提供云产品。立即开始使用 $200 免费信用额度!
CSS 中的 accent-color
属性能够使用自定义颜色值重新着色浏览器默认样式提供的表单控件的强调色。
.element {
accent-color: #f8a100;
}
accent-color
在 CSS 基本用户界面模块级别 4 中定义,目前处于工作草案阶段。这意味着细节仍在不断完善,在规范成为正式建议之前可能会发生变化。
语法
accent-color: auto | <color>;
- 初始值: auto
- 应用于:所有元素
- 继承:是
- 计算值:关键字
auto
或计算的颜色 - 动画类型:按计算值类型
值
/* Keyword */
accent-color: auto;
/* <color> */
accent-color: red;
accent-color: #f8a100
accent-color: rgba(102, 100, 70, 1);
accent-color: hsla(180, 100%, 70%, 1);
/* Global*/
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: unset;
终于,一种“简单”的表单样式方法!
传统上,表单样式一直都很糟糕。看看 自定义 <progress>
元素 就知道,样式化控件有多么困难。通常情况下,这会导致我们只能在接受浏览器默认样式和从头开始重置和重新创建它们之间做出选择。
通常,要获得自定义 <progress>
颜色,需要以下步骤
accent-color
允许我们使用一行 CSS 代码更改表单控件中使用的颜色
它适用于特定的表单控件
在你开始为所有东西添加强调色之前,值得注意的是,只有四个特定的表单控件支持 accent-color
属性
- 复选框 (
<input type="checkbox">
) - 单选按钮 (
<input type="radio">
) - 范围 (
<input type="range">
) - 进度 (
<progress>
)
它适用于首选配色方案
accent-color
属性尊重配色方案。如果用户将其首选配色方案设置为操作系统设置中的“浅色”,那么浏览器需要评估 accent-color
值并确定一个合适的 UI 颜色。这样,我们就能够确保浏览器 UI 和强调色之间的颜色对比度可访问。不会出现浅色强调色与浅色表单控件 UI 形成对比的问题。

每个浏览器都有自己的计算要使用哪个颜色的方法。Glitch 上的这个演示 展示了一系列带有各种强调色的复选框控件。在支持 accent-color
的浏览器中查看它,以了解该浏览器如何将 UI 颜色与不同的强调色配对。

而且,如果我们有一个喜欢的强调色,但它与浏览器选择的 UI 颜色不匹配,我们可以使用 color-scheme
属性来覆盖它。
但是,你可能不想质疑浏览器的选择,即使它最终在不同浏览器之间略有不一致。这需要处理很多东西,你可能对 UI 的可访问性造成比改善更大的损害。
浏览器不会在深色模式下覆盖 accent-color
就像它有时在其他情况下所做的那样。
其他表单控件需要采用不同的方法
再说一次,目前只有少数表单控件支持强调色。这意味着我们仍然需要求助于传统的黑客方法来对其他类型的表单控件进行样式化。不过,Adam Argyle 和 Joey Arhar 已经为你准备了一个 不错的代码段,它可以帮助将强调色应用于其他表单控件,以及列表标记、选择和可见焦点。
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }
:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
) {
color: var(--brand);
}
浏览器支持
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
否 | 93 | 92 | 93 | 15.4 | 79 |
iOS Safari | Android Chrome | Android Firefox | Android 浏览器 | Opera Mobile |
---|---|---|---|---|
15.4 | 104 | 101 | 104 | 否 |
来源:caniuse
accent-color
在 ShopTalk 上
视频:Chris 和 Dave 不仅展示了 accent-color
的基础知识,还展示了如何使用它编写更简洁的 CSS 代码,考虑配色方案,甚至一些没有它就很难实现的技巧。
进一步阅读
- CSS accent-color (web.dev)
- CSSWG 拉取请求 #5187 (GitHub)
- accent-color CSS 属性 (Chrome 平台状态)
- Firefox 错误单 #1705605 (Mozilla Bugzilla)
- Safari 错误单 #227587 (Safari Bugzilla)
- 位置请求:accent-color CSS 属性 (Chromium 给 Safari 的消息)