CSS accent-color （强调色）属性确定应用于由某些元素创建的用户界面控件的主题色。
此属性允许浏览器自动调整某些元素（如表单输入、按钮等）以使用指定的颜色作为强调色，通常用于用户界面元素，浏览器可以在其中调整颜色以匹配主题或用户首选项。
以下 HTML 元素目前在支持 accent-color 属性的浏览器中受到 accent-color 属性的影响：
分配给每个用户代理的主题色各不相同，以确保可读性和对比度。此颜色仅应用于其适用状态中的特定用户界面控件。
可能的值
- auto - 表示 UA 选择的颜色，该颜色应与平台的主题色匹配。
- <color> - 定义将用作 accent-color 的颜色。
适用于
所有元素。
语法
Keyword值
accent-color: auto;
<color> 值
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);
CSS accent-color - 自动值
以下示例演示了 accent-color： auto 属性自动应用适当的强调色 -
<html>
<head>
<style>
input {
accent-color: auto;
}
</style>
</head>
<body>
<input type="checkbox" id="check" checked>
<label for="check">accent-color: auto</label>
</body>
</html>
CSS accent-color - <color> 值
以下示例演示如何使用 accent-color 属性为复选框设置不同的主题色。第一个复选框是红色的，第二个是黄色的 -
<html>
<head>
<style>
#check1 {
accent-color: red;
}
#check2 {
accent-color: yellow;
}
</style>
</head>
<body>
<input type="checkbox" id="check1" checked>
<label for="check1">Red</label></br>
<input type="checkbox" id="check2" checked>
<label for="check2">Yellow</label>
</body>
</html>
具有不同 HTML 元素的 CSS accent-color
以下示例演示了如何对不同的 HTML 元素使用 accent-color 属性-
<html>
<head>
<style>
input[type=radio] {
accent-color: red;
}
input[type=range] {
accent-color: rgb(55, 255, 0);
}
progress {
accent-color: violet;
}
</style>
</head>
<body>
<h3>accent-color for radio buttons</h3>
<input type="radio" id="radio1" name="gender" checked>
<label for="radio1">Male</label></br>
<input type="radio" id="radio2" name="gender">
<label for="radio2">Female</label>
<h3>accent-color for a range</h3>
<label for="ran">Range</label></br>
<input type="range" id="ran" name="range_val" min="0" max="5">
<h3>accent-color for a progress</h3>
<label for="prog">Progress</label></br>
<progress id="prog" name="prog_val"value="60" max="100">60%</progress>
</body>
</html>
