accent-color

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

CSS 属性 accent-color 为某些元素所生成的用户界面控件设置了强调色。

尝试一下

支持 accent-color 属性的浏览器目前将其应用于下列 HTML 元素：

语法

css
/* 关键字值 */
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;

取值

auto

表示用户代理所选颜色，应匹配平台的强调色（若有）。

<color>

指定用作强调色的颜色。

形式定义

初始值auto
适用元素所有元素
是否是继承属性是
计算值auto is computed as specified and <color> values are computed as defined for the color property.
动画类型按计算值的类型

形式语法

accent-color = 
  auto     |
  <color>

示例

设置自定义强调色

HTML

html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

CSS

css
input {
  accent-color: auto;
  display: block;
  width: 30px;
  height: 30px;
}

input.custom {
  accent-color: rebeccapurple;
}

结果

规范

Specification
CSS Basic User Interface Module Level 4
# widget-accent

浏览器兼容性

BCD tables only load in the browser

参见