accent-color
Sets the accent color for user-interface controls like checkboxes, radio buttons, and range sliders. It allows you to style native forms with your brand color with a single line of CSS.
It is documented as part of the CSS Basic User Interface specification.
Syntax
/* Usage Example */
form.brand-theme {
accent-color: var(--primary-color);
/* styles all native checkboxes and radio buttons to match your brand */
}
/* Syntax */
accent-color: auto;
/* Global values */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;
accent-color Browser support
Widely available
Since
2022 94% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
93+
92+
15.4+
93+