Web 开发者都有一个相同的共识，要在 HTML 表单元素上定制 UI 风格，相对而言是较为困难的。很多时候，开发者都是通过别的方式来的绕开原生表单控件的使用，比如使用非表单元素来模拟表单控件。这样做的唯一目的就是让表单控件能在各平台上达到相同的 UI 风格。这样做虽然能让表单控件 UI 风格达到一致性，但也会给我们的工作增加很多额外的工作量，除此之外，也会导致表单控件元素状态的样式被丢弃，以及内置的可访问性功能也会丧失。也就是说，要完全重现浏览器提供的功能，可能比你想要承担的工作要多。

如果说，能够直接有相应的 CSS 属性让开发者操作表单控件 UI是不是事情就会简单地多，开发者也可以从此避开用非表单控件元素来让表单控件更具个性化 UI。虽然到目前为止，我们还无法直接做到这一点，但 CSS 也在这方面做出很多的改变，比如说，我们现在可以直接使用 CSS 来控制表单元素的重点颜色（Accent Color），一种典型的明亮的颜色。这也就是我们今天要介绍的 CSS 的 accent-color 属性！

accent-color 简介

accent-color 属性是 CSS Basic User Interface Module Level 4 功能模块中 “美化控件”（Styling Widgets）中的一个属性。最早接触到这个属性是今年2月看到 @Adam Argyle 发的推：

从这条推特的信息，知道使用 CSS 的 accent-color 可以用来给设置表单控件的高亮（重点颜色），并且可以让支持的终端达到一致的效果：

到目前为止，只有Chromium 93+ 和 Firefox 92+ 浏览器支持 accent-color属性：

accent-color 使用

accent-color 使用非常简单，我们可以通过下面这几行代码，就可以定制化表单的控件颜色：

:root {
    accent-color: deeppink;
}

@media (prefers-color-scheme: dark) {
    :root {
        accent-color: hsl(328 100% 65%);
    }
}

上面示例展示了，accent-color属性和color-scheme一起使用的效果，允许开发者同时给亮色和深色元素着色。