前言

在之前的网站开发中，我们是很难去更改的你某些控件的颜色。我们可能要使用各种技巧来自定义我们的控件。好消息是，今天如果我们想要去改变控件的颜色，css为我们提供了一些新的属性来进行修改。

例如::marker 可以用来修改有序列表/无序列表的样式。

::marker {
	color: #30cc7e;
}

想想如果我们想要自定义一个Progress进度条的颜色，我们需要怎么做？

除了要考虑不同浏览器的兼容性，还需要设置很多的前提，而且-webkit-progress-value和-moz-progress-bar特性是非标准的，还尽量不要在生产环境中使用它！所以很多时候，我们都是利用其他标签来实现我们的进度条。

progress[value] {
  appearance: none; /* Needed for Safari */
  border: none; /* Needed for Firefox */
  color: #30cc7e; /* Fallback to a solid color */
}


progress::-webkit-progress-value {
  background-color: #30cc7e;
}

progress::-moz-progress-bar {
  background-color: #30cc7e;
}

但今天我们正在向前迈出一小步，在2022年推出的accent-color解决了我们的困扰(请注意，强调色属性仍然没有得到很好的支持，因为它是相当新的，但可以从 Firefox 92 和 Chrome 93 开始使用它。我相信用不了多久，其他现代浏览器也会支持它。)!

CSS accent-color是在CSS 基本用户界面模块级别 4 (w3.org)定义的。主要作用是在让开发者在不改变浏览器默认样式的修改表单控件的强调色。

需要注意的是，目前accent-color只支持4个人特定的表单控件。

• 复选框 （<input type="checkbox">)

• 单选按钮 （<input type="radio">)

• 范围 （<input type="range">)

• 进度 （<progress>)

兼容性

语法

accent-color: auto;
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;
accent-color: 颜色值；

.accent{
	accent-color: #30cc7e;
}
<input  type="checkbox" class="accent" checked>

继承性

accent-color 属性具有继承性，在他的任意级祖先元素上设计都可以影响到控件的颜色，例如我们在跟上添加强调色，网站的所有表单控件都可以增加强调色。

:root {
    accent-color: #30cc7e;
}

智能

为什么说它是一个智能的颜色？它会根据我们设置的颜色来处理控件本身的边框和背景。

对比上面的两张图，我们选择特别深的红色时，会选择白色作为控件的边框和背景色。如果是较浅的颜色，他会选择灰色作为控件的边框和背景颜色。