Skip to content
关于 博客 学习 探索 模式 Case studies
本页内容
  • 支持的元素
    • 复选框
    • 单选按钮
    • 范围滑块
    • 进度元素
  • 保证对比度
  • 额外:更多着色
    • 潜在的未来
  • Home
  • All articles

CSS “强调色”

使用一行代码将您的品牌颜色带入内置的 HTML 表单输入。

Aug 11, 2021
Available in: English、Español、Português和한국어
Adam Argyle
Adam Argyle
TwitterGitHubGlitchHomepage
Joey Arhar
Joey Arhar
TwitterGitHub
本页内容
  • 支持的元素
    • 复选框
    • 单选按钮
    • 范围滑块
    • 进度元素
  • 保证对比度
  • 额外:更多着色
    • 潜在的未来

当今的 HTML 表单元素难于自定义。感觉好像是在很少或没有自定义样式之间进行选择,或者重置输入样式并从头开始构建。从头开始构建工作量最终会比预期的多得多。还可能导致遗忘元素状态的样式(不确定),以及内置辅助功能的丢失。完全重新创建浏览器提供的内容可能比您希望承担的工作更多。

accent-color: hotpink;

CSS UI 规范中的 accent-color 在这里用一行 CSS 为元素着色,这种方法将您的品牌带入元素,使您免于自定义工作。

强调色演示的浅色主题截图,其中复选框、单选按钮、范围滑块和进度元素都被着色为热粉色。
演示

accent-color 属性也适用于 color-scheme ,允许作者为浅色和深色元素着色。在以下示例中,用户激活了深色主题,页面使用 color-scheme: light dark ,并使用相同的 accent-color: hotpink 作为深色主题的热粉色着色控件。

强调色演示的深色主题截图,其中复选框、单选按钮、范围滑块和进度元素都被着色为热粉色。
演示

浏览器支持 #

撰写本文的当下,Chromium 93+ 和 Firefox 92+ 支持 accent-color。

支持的元素 #

目前,只有四个元素会通过 accent-color 属性着色:复选框、单选按钮、范围滑块和进度元素。每个都有浅色和深色配色方案,可在 https://accent-color.glitch.me 处预览。

警告

如果以下演示元素的颜色都相同,则您的浏览器不支持 accent-color。

复选框 #

单选按钮 #

范围滑块 #

进度元素 #

保证对比度 #

为了防止存在不可访问的元素,具备 accent-color 的浏览器需要确定符合条件的对比度颜色,以便与自定义强调色一起使用。下面的截图展示了 Chrome 94(左)和 Firefox 92 Nightly(右)在算法上的不同:

Firefox 和 Chromium 并排的屏幕截图,以各种色调和暗度呈现系列复选框。

最重要的一点是要信任浏览器。提供品牌颜色,并相信它会为您做出明智的决定。

浏览器不会在深色主题中更改您的颜色。

额外:更多着色 #

您可能想知道如何为这四个表单元素之外的其他元素着色,是吧?尤其以下几个元素的着色:

  • 对焦环
  • 文本选择突出显示
  • 列表标记
  • 箭头指示符(仅限 Webkit)
  • 滚动条滑块(仅限 Firefox)
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);
}

潜在的未来 #

该规范并未将 accent-color 的应用限制在本文中显示的四个元素上,以后可能会添加更多支持。<select> 中选定的 <option> 等元素可以采用 accent-color 突出显示。

您还希望对网页上的什么着色?将您的选择通过推特发给 @argyleink ,有可能会被添加到本文中!

CSS
Last updated: Aug 11, 2021 — Improve article
Return to all articles
分享
订阅

Contribute

  • 提交错误
  • 查看源代码

相关内容

  • developer.chrome.com
  • Chrome 动态
  • 案例研究
  • 播客
  • 节目

连接

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 所有产品
  • 条款和隐私权
  • 社区准则

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.