accent-color使用

accent-color

是CSS 2022年推出的一个新属性，其主要功能是修改input默认控件的颜色。它支持多种input控件元素，包括

1. 复选框：<input type="checkbox">。
2. 单选框：<input type="radio">。
3. 范围选择框：<input type="range">。
4. 进度指示元素：<progress>：

查看案例：https://jsbin.com/gapowof/10/edit?html,css,output

accent-color 语法：

/* 关键字值 */
accent-color: auto;

/* <color> 值 */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);

/* 全局值 */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

accent-color属性是可继承的，这意味着可以在根级别设置它，以在任何地方应用它。例如：
:root { accent-color: lime; } 或 form { accent-color: lime; }。

在当前的浏览器环境中，accent-color在Chrome、Edge、Firefox和Safari技术预览版中已经得到了支持。对于不支持该属性的浏览器，它们会直接使用默认颜色，并且输入功能仍然完全可用。

accent-color的推出使得开发者可以更方便地控制表单元素的重点颜色，而无需使用非表单元素来模拟表单控件，从而减少了额外的工作量，并保留了表单控件元素状态的样式和内置的可访问性功能。