accent-color

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您的旅程每个阶段提供云产品。立即开始使用 $200 免费信用额度!

CSS 中的 accent-color 属性能够使用自定义颜色值重新着色浏览器默认样式提供的表单控件的强调色。

.element {
  accent-color: #f8a100;
}

accent-colorCSS 基本用户界面模块级别 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 颜色与不同的强调色配对。

Chrome 的颜色算法(左侧)与 Firefox 相比(来源:web.dev

而且,如果我们有一个喜欢的强调色,但它与浏览器选择的 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);
}

浏览器支持

IEEdgeFirefoxChromeSafariOpera
93929315.479
iOS SafariAndroid ChromeAndroid FirefoxAndroid 浏览器Opera Mobile
15.4104101104

来源:caniuse

视频:accent-color 在 ShopTalk 上

Chris 和 Dave 不仅展示了 accent-color 的基础知识,还展示了如何使用它编写更简洁的 CSS 代码,考虑配色方案,甚至一些没有它就很难实现的技巧。

进一步阅读