CSS “强调色”
使用一行代码将您的品牌颜色带入内置的 HTML 表单输入。
当今的 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 的浏览器需要确定符合条件的对比度颜色，以便与自定义强调色一起使用。下面的截图展示了 Chrome 94（左）和 Firefox 92 Nightly（右）在算法上的不同：
最重要的一点是要信任浏览器。提供品牌颜色，并相信它会为您做出明智的决定。
额外：更多着色 #
您可能想知道如何为这四个表单元素之外的其他元素着色，是吧？尤其以下几个元素的着色：
- 对焦环
- 文本选择突出显示
- 列表标记
- 箭头指示符（仅限 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 ，有可能会被添加到本文中！