The accent-color property lets you change the built-in highlight color of certain form controls. It is a simple way to make checkboxes, radio buttons, sliders, and progress bars match your site theme without rebuilding them from scratch.
Style browser controls safely.
Use one clear CSS property.
Named, hex, rgb, hsl, variables.
Set it once on a parent.
Keep contrast readable.
Understand browser behavior.
The accent-color CSS property sets the accent color used by the browser for selected or active parts of supported form controls. For example, it can turn a checked checkbox red, make a selected radio button purple, or color the filled track of a range input.
Use accent-color when you want native form controls to match your brand color while keeping their built-in keyboard and screen-reader behavior.
Write accent-color like any other CSS property. The value is usually a color:
selector {
accent-color: color;
}input[type="checkbox"] {
accent-color: red;
}accent-color to the control itself or a parent container.auto.| Question | Answer |
|---|---|
| Initial value | auto |
| Applies to | All elements, but only supported controls visibly use it |
| Inherited | Yes |
| Animatable | By computed color value |
| Common use | Checkboxes, radio buttons, sliders, and progress bars |
The accent-color property accepts standard CSS color values. It also accepts auto, which lets the browser choose the default system accent color.
| Value | Example | Meaning |
|---|---|---|
| Named color | accent-color: red; | Uses a CSS color name |
| Hex color | accent-color: #2563eb; | Uses a hexadecimal color |
| RGB or HSL | accent-color: hsl(142 72% 29%); | Uses functional color notation |
| CSS variable | accent-color: var(--brand); | Uses a reusable theme color |
auto | accent-color: auto; | Uses the browser or system default |
accent-color works on native controls where the browser exposes a visible accent. The most common controls are:
<input type="checkbox"> — changes the checked mark or checked background color.<input type="radio"> — changes the selected radio indicator.<input type="range"> — changes the active part of the slider in supporting browsers.<progress> — changes the progress fill in supporting browsers.These controls use the same red accent color from the reference example:
Try accent-color with checkboxes, radio buttons, sliders, and theme variables.
Use accent-color to theme native checkboxes, radio buttons, sliders, and progress elements without rebuilding them from scratch.
This is the simplest use case. Select a checkbox and let the browser draw it using your chosen color.
<style>
input[type="checkbox"] {
accent-color: red;
}
</style>
<label>
<input type="checkbox" checked>
Check me out!
</label>The checkbox remains a normal browser checkbox, but its checked state uses red as the accent color.
Apply accent-color to a group of radio buttons to make the selected option match your theme.
<style>
.plan-options {
accent-color: #2563eb;
}
</style>
<div class="plan-options">
<label><input type="radio" name="plan" checked> Basic</label>
<label><input type="radio" name="plan"> Pro</label>
</div>Because accent-color is inherited, setting it on .plan-options styles supported controls inside the group.
Use the same accent color for interactive progress-like controls.
<style>
input[type="range"],
progress {
accent-color: seagreen;
}
</style>
<input type="range" value="70">
<progress value="70" max="100">70%</progress>The filled portions of the controls use seagreen where the browser supports accent styling for those controls.
Store your brand color once and reuse it across every supported form control in a form or layout.
For real projects, store your brand color in a custom property and reuse it.
:root {
--brand-color: #7c3aed;
}
form {
accent-color: var(--brand-color);
}Changing --brand-color updates every supported control that uses the variable.
accent-color WorksApply accent-color to a control or parent element using any standard CSS color value.
Supported controls use that color for checked marks, selected radio dots, slider tracks, and progress fills.
Set the property on a form or wrapper and every supported child control inherits the same accent.
Native controls keep keyboard and screen-reader behavior while matching your site colors.
accent-color is supported in all modern browsers. Older browsers ignore the property and keep default control styling.
Chrome, Edge, Firefox, Safari, and Opera all support accent-color for native form controls in current versions.
When unsupported, controls still work with the browser’s default colors.
Bottom line: Use accent-color as progressive enhancement. Unsupported browsers still render usable form controls.
The accent-color property is a small but useful CSS feature for styling native form controls. It lets you match checkboxes, radio buttons, sliders, and progress elements to your site colors without losing the benefits of browser-built controls.
For beginners, the main idea is simple: choose a readable color, apply it to supported controls, and let the browser handle the detailed control styling.
accent-color for simple native form control themingaccent-colorUse these points when styling your next form.
Styles built-in form accents.
PurposeCheckbox, radio, range, progress.
ScopeUse any standard CSS color.
ValuesCan be set on a parent.
CascadeKeep contrast clear.
A11yOpen the HTML editor, apply accent-color, and preview form controls instantly.
5 people found this page helpful