CSS accent-color Property

Description

The accent-color CSS property sets the accent color of an element. The accent color is used for elements such as links, buttons, and scrollbars. It can also be used to highlight important text or elements. The accent-color property can be set to any valid CSS color value. If the property is not set, the browser will use its default accent color.

Initial value

auto

Applies to

all elements

Inherited

yes

Computed value

the keyword auto or a computed color

Animatable

by computed value type

JavaScript syntax

object.style.accentColor

Interactive Demo

accent-color: green;

accent-color: #E31CCF;

accent-color: rgb(23, 88, 103);

accent-color: hsl(237, 63%, 50%);

Syntax

accent-color: auto | <color> | initial | inherit

Values

• autoRepresents 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.

Example

<p>

   Accent-Color Radio Button

   <input class="accent_orange" type="radio" name="r1" checked>

   <input class="accent_orange" type="radio" name="r1">

</p>

<p>

   Accent-Color Checkbox Button

   <input class="accent_blue" type="checkbox" name="c1" checked>

   <input class="accent_blue" type="checkbox" name="c1">

</p>

<p>

   System Radio Button

   <input type="radio" name="r2" checked>

   <input type="radio" name="r2">

</p>

<p>

   System Checkbox Button

   <input type="checkbox" name="c2" checked>

   <input type="checkbox" name="c2">

</p>

.accent_orange {
    accent-color: orange;
}
.accent_blue {
    accent-color: blue;
}

Browser Support

The following table will show you the current browser support for the CSS accent-color property.

Desktop
93	93	92	79	15.4

Tablets / Mobile
93	92	66	15.4	17	93

Last updated by CSSPortal on: 31st December 2023