CSS accent-color 属性

主题

默认模式
浅蓝色模式
淡红色模式
深夜模式

定义和用法

accent-color是 CSS 中的一个较新属性，用于设置某些表单元素的强调色。

accent-color不是一个高频使用的属性，但当需要简单修改表单选中色时，它比写一堆CSS覆盖代码方便得多，可以记在小本本上备用。它支持的表单控件有：

<input type="checkbox">
<input type="radio">
<input type="range">
<progress>

使用实例

接下来用多种实例演示accent-color属性的用法，来深化您对accent-color属性的理解。

实例代码运行代码

复制

input[type=checkbox] {
    accent-color: red;
}

input[type=radio] {
    accent-color: green;
}

input[type=range] {
    accent-color: rgb(0, 0, 255);
}

progress {
    accent-color: hsl(39, 100%, 50%);
}

原始的效果：

实现的效果：

CSS 语法

accent-color: auto|color|initial|inherit;

属性值解释

值	描述
`auto`	默认值。浏览器选择强调色。
`color`	指定用作强调色的颜色。可以使用所有合法的颜色值（rgb、十六进制、命名颜色等）。有关合法值的更多信息，请参阅我们的 CSS 颜色教程。
`initial`	将此属性设置为其默认值。参阅 initial。
`inherit`	从其父元素继承此属性。参阅 inherit。