CSS accent-color Property
Sets the accent color for form controls like checkboxes, radio buttons, and range sliders
Syntax
accent-color: auto | <color>;Values
| Value | Description |
|---|---|
| auto | Browser default accent color |
| <color> | Custom accent color |
Example
input[type="checkbox"],
input[type="radio"],
progress {
accent-color: #3b82f6;
}Understanding CSS accent-color
The CSS accent-color property sets the accent color for form controls like checkboxes, radio buttons, and range sliders. As part of the Misc module in CSS, it is one of the most commonly used properties for controlling the visual presentation of web pages.
You can set accent-color to values such as auto, <color>, among others. Each value changes how the browser renders the affected element, giving you fine-grained control over your page layout and design. Choosing the right value depends on the specific design requirements of your project.
Common use cases for the accent-color property include responsive web design, component-based layouts, and creating visually consistent interfaces across devices. It works closely with related properties like color, caret-color, appearance to achieve complex styling effects. Understanding how these properties interact helps you write cleaner, more maintainable stylesheets.
Browser support for accent-color is excellent across all modern browsers including Chrome, Firefox, Safari, and Edge. For older browsers, consider using fallback values or progressive enhancement strategies. The property can also be set dynamically via JavaScript using element.style.accentColor or the CSS custom properties (variables) approach for theming.
Related Properties
colorSets the foreground color of an element's text and text decorations
caret-colorSets the color of the text cursor (caret) in editable elements
appearanceControls whether an element uses platform-native styling or custom CSS styling
color-schemeIndicates the color schemes the element can be rendered in
Explore More CSS Properties
Browse our complete reference of 251 CSS properties with syntax, examples, and tips.