CSS 强调色

只需一行代码即可将您的品牌颜色应用到内置的 HTML 表单输入。

Adam Argyle

Joey Arhar

如今的 HTML 表单元素很难自定义。感觉就像是在只有少数自定义样式之间做出选择，或者需要重置输入样式并从头开始构建。从头开始构建该框架最终会比预期工作量大。这还可能会导致忘记元素状态的样式（不确定，我看着您），以及失去内置无障碍功能。因此，要完全重新创建浏览器提供的内容 可能会比您预想的要复杂得多

accent-color: hotpink;

CSS 界面规范中的 CSS accent-color 支持使用一行 CSS 为元素着色，提供一种将品牌融入元素的方法，让您无需进行自定义。

浏览器支持

• 93
• 93
• 92
• 15.4

来源

演示

accent-color 属性还可与 color-scheme 配合使用，允许作者对浅色和深色元素进行色调调节。在以下示例中，用户已启用深色主题，页面使用 color-scheme: light dark，并为深色主题热粉色调控件使用相同的 accent-color: hotpink。

演示

支持的元素

目前，只有四个元素可通过 accent-color 属性进行色调调节：checkbox、radio、range 和 progress。您可以在以下网址预览每种颜色的浅色和深色配色方案：https://accent-color.glitch.me。

警告 ：如果以下演示元素的颜色都相同，则表示您的浏览器尚不支持 accent-color。

复选框

电台

范围

进度

保证对比度

为防止现有元素无法访问，具有 accent-color 的浏览器需要确定可与自定义强调色一起使用的符合条件的对比度。以下屏幕截图展示了 Chrome 94（左侧）和 Firefox 92 夜间模式（右侧）的算法差异：

因此，最重要的是信任浏览器。提供品牌颜色，并相信它能为您做出明智的决定。

注意 ：在深色主题中，浏览器不会更改颜色。

额外：更着色

您可能想知道如何为这四个表单元素以上的色调着色？以下是用于调色的最小沙盒：

• 对焦环
• 文本选择突出显示
• 列出标记
• 箭头指示符（仅限 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 发推文，它可能会被添加到本文中！