W3cubDocs

/CSS

accent-color

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

Try it

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

Syntax

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

/* <color> values */
accent-color: red;
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.

Formal definition

Initial value auto
Applies to all elements
Inherited yes
Computed value auto is computed as specified and <color> values are computed as defined for the color property.
Animation type by computed value type

Formal syntax

accent-color = 
  auto     |
  <color>

Examples

Setting a custom accent color

HTML

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

CSS

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

input.custom {
  accent-color: rebeccapurple;
}

Result

Specifications

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
accent-color
93
93
92
No
79
15.4
93
93
92
66
15.4
17.0

See also

© 2005–2022 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color