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.

The accent-color CSS property sets the accent color for user-interface controls generated by some elements.

试一试

Browsers that support accent-color currently apply it to the following HTML elements

Each user agent has an accent color, with variations to ensure legibility and contrast. That accent color is not used by every user-interface control nor in every state of the control. The accent-color is only applied to user-interface controls that use an accent color in the states where it is applicable.

语法

css
/* Keyword values */
accent-color: auto;

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

/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;

Values

auto

Represents a UA-chosen color, which should match the accent color of the platform, if any.

<color>

Specifies the color to be used as the accent color.

正式定义

Initial valueauto
Applies toall elements
Inheritedyes
Computed valueauto is computed as specified and <color> values are computed as defined for the color property.
Animation typeby computed value type

正式语法

accent-color = 
  auto     |
  <color>

示例

Setting a custom accent 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;
}

Result

规范

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

浏览器兼容性

BCD tables only load in the browser

另请参阅