CSS accent-color属性确定应用于由某些元素创建的用户界面控件的强调颜色。
此属性允许浏览器自动调整某些元素（如表单输入、按钮等）以使用指定的颜色作为强调色，通常用于浏览器可以调整颜色以匹配主题或用户首选项的用户界面元素。
以下 HTML 元素当前受浏览器中强调色的影响支持:
<input type="checkbox">
<input type="radio">
<input type="range">
<progress>
分配给每个用户代理的强调色各不相同，以确保可读性和对比度。此颜色仅适用于适用状态下的特定用户界面控件。
属性值
auto: 表示 UA-选择的颜色应与平台的强调色相匹配。
<color>: 定义将使用哪种颜色作为强调色。
适用范围
所有元素。
语法
关键字值
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: auto
以下示例演示了CSS 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> CSS accent-color 不同HTML元素
以下示例演示如何使用accent-color属性来表示不同的 HTML 元素−
<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 用于单选按钮</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 用于范围值</h3>
<label for="ran">Range</label></br>
<input type="range" id="ran" name="range_val" min="0" max="5">
<h3>accent-color 用于进度条</h3>
<label for="prog">Progress</label></br>
<progress id="prog" name="prog_val"value="60" max="100">60%</progress>
</body>
</html>