accent-color

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or 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
适用元素all elements
是否是继承属性yes
计算值auto is computed as specified and <color> values are computed as defined for the color property.
Animation typeby computed value type

形式语法

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

参见