CSS accent-color Property

The accent-color property in CSS specifies the color of user interface elements and controls, such as checkboxes, radio buttons, range sliders, and progress indicators. This property allows for enhanced customization of form controls to match the design of your website.

Syntax:

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

Property Value:

• auto: It represents the UA-chosen color that will set the accent color for the control elements.
• <color>: It specifies the color for an accent color in RGB representation, hex representation, and also with the color name.
• initial: It sets the accent-color property to its default value. The default value of this property is auto.
• inherit: It inherits this property from its parent component.

Examples of CSS accent-color Property

Example 1: The following code demonstrates the accent-color property of CSS.

Output:

Example 2: Using accent color as red with input range field

Output:

Supported Browsers

• Google Chrome 93
• Firefox 92
• Safari 15.4
• Opera 79
• Edge 93