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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
accent-color
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

参见