CSS accent-color
The CSS accent-color property sets the accent color for user-interface controls generated by the element, such as checkboxes, radio buttons, range sliders, and progress bars.
Historically, customizing the look of native form controls required tedious workarounds, such as hiding the native control using appearance: none and recreating it with custom SVGs and pseudo-elements. The accent-color property solves this by allowing you to tint native controls to match your brand or theme with a single line of CSS, while preserving the native browser's interaction physics, accessibility semantics, and platform-specific behaviors.
When you specify a custom color, the browser also automatically calculates a contrasting foreground color for inner indicators (such as checkmarks in checkboxes or dots in radio buttons) to ensure proper accessibility and contrast.
Syntax
Possible Values
auto- Represents the platform-determined accent color chosen by the browser or operating system. This is the initial default value.
- color
- A valid CSS
<color>value representing the accent color to be applied to the form controls.
In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value:
initial- Represents the value specified as the property's initial value.
inherit- Represents the computed value of the property on the element's parent.
unset- This value acts as either
inheritorinitial, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.
Basic Property Information
- Initial Value
auto- Applies To
- All elements
- Inherited?
- Yes
- Media
- Interactive
- Animation Type
- As a color
Example Code
Because accent-color is inherited, you can set it globally on the :root or form element, or scope it to specific input elements:
Affected Form Controls
The accent-color property typically applies to the following HTML elements:
- Checkboxes:
<input type="checkbox">(affects the background of the checked box). - Radio Buttons:
<input type="radio">(affects the outer circle and inner selection dot). - Range Sliders:
<input type="range">(affects the filled portion of the track and the thumb). - Progress Bars:
<progress>(affects the progress bar indicator).
CSS Specifications
- The
accent-colorproperty is defined in CSS Basic User Interface Module Level 4 (W3C Working Draft).
Browser Support
Browser support for CSS properties can vary, particularly for newer or experimental features. Check current browser compatibility before using a property in production, especially when supporting older browsers.
Initial Value
CSS properties have an initial value that applies when the property has not been explicitly set. The initial value is different from the value inherited from a parent element and may vary between properties.
Inheritance
Some CSS properties inherit their computed value from their parent element by default, while others do not. The inherit, initial, unset, and revert keywords can also be used to control how a property gets its value.
Vendor Prefixes
Most modern CSS properties use the standard, unprefixed syntax. Vendor-prefixed properties such as -webkit- are mainly relevant to older browser versions or specific features and should only be used when required by your browser support targets.