accent-color

{{CSSRef}} 

The accent-color CSS property sets the {{Glossary("accent")}}  color for user-interface controls generated by some elements.

{{EmbedInteractiveExample("pages/css/accent-color.html")}} 

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

• <input type="checkbox">
• <input type="radio">
• <input type="range">
• <progress>

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.

Syntax

/* 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.
• {{cssxref("<color>")}} 
  • : Specifies the color to be used as the accent color.

Formal definition

{{cssinfo}} 

Formal syntax

{{csssyntax}} 

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

{{EmbedLiveSample('Setting_a_custom_accent_color', 500, 200)}} 

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

• {{cssxref("background-color")}} , {{cssxref("border-color")}} , {{cssxref("caret-color")}} , {{cssxref("color")}} , {{cssxref("column-rule-color")}} , {{cssxref("outline-color")}} , {{cssxref("text-decoration-color")}} , {{cssxref("text-emphasis-color")}} , {{cssxref("text-shadow")}} : Other color-related properties
• {{cssxref("<color>")}} : Related data type
• {{HTMLElement("input")}} : Related HTML element