CSS accent-color: Change Form Control Colors

The CSS accent-color property lets you change the color of certain native form controls—checkboxes, radio buttons, range sliders, and progress bars—with a single line of CSS. You set it on the element (or its parent) like input { accent-color: #4CAF50; }, and the browser recolors the control’s accent parts while keeping its default structure and behavior.

What accent-color Actually Does

The property was introduced to give developers a simple way to match form controls to a site’s brand without building custom widgets. It affects only the “accent� parts of a control—the filled portion of a checkbox, the selected dot in a radio button, the filled track of a range slider, and the progress bar’s fill. It does not change the control’s border, background, or hover/focus states; those still come from the browser’s default (or from other CSS you write).

Browser support is solid: Chrome 93+, Edge 93+, Firefox 92+, and Safari 15.4+ all support it. For older browsers, the property is ignored, and the control falls back to the default color—so it’s safe to use as a progressive enhancement.

How to Apply accent-color

You can set the property on individual elements or inherit it from a parent. Here’s a simple example:

input[type="checkbox"] {
  accent-color: #e91e63;
}

input[type="radio"] {
  accent-color: #3f51b5;
}

input[type="range"] {
  accent-color: #ff9800;
}

progress {
  accent-color: #009688;
}

To apply one color to all supported controls on a page, set it on a common ancestor:

form {
  accent-color: #4CAF50;
}

This works because accent-color is an inherited property. You can also use any CSS color value: named colors, hex, rgb(), hsl(), or var() references to custom properties.

What You Can and Cannot Change

It’s important to know the limits. accent-color only affects the accent areas listed above. It does not change:

• The overall size or shape of the control
• The border or outline (including focus rings)
• The background color of the control
• The checkmark or radio dot itself—those are drawn by the browser using the accent color

For example, a checkbox with accent-color: red will show a red filled square when checked, but the unchecked box remains the default gray. If you need a custom-looking checkbox (e.g., rounded corners, a custom checkmark), you’ll still need to build one with appearance: none and your own CSS.

Choosing the Right Color

Pick a color that contrasts well with the control’s background. Since the accent color is used for the “filled� state, it should be dark enough to be visible against white or light gray. For accessibility, ensure the contrast ratio between the accent color and the control’s background is at least 3:1 for UI components. Tools like WebAIM’s contrast checker can help.

You can also use color-scheme alongside accent-color to support dark mode. Setting color-scheme: light dark on the root tells the browser to render form controls appropriately for dark backgrounds, and then accent-color will apply on top of that. This combination gives you consistent branding in both themes.

Common Problems and Misconceptions

One common mistake is expecting accent-color to change the entire control. It doesn’t. If you set a red accent on a checkbox, the border remains gray. To change the border, you need to style the element directly (e.g., border: 2px solid red), but note that native controls often ignore many CSS properties unless you reset appearance.

Another misconception is that accent-color works on select dropdowns. It does not. The property is limited to the four input types mentioned. For a styled select, you’ll need custom CSS or a library.

Also, some browsers may not apply accent-color to input[type="range"] on all platforms. For instance, Firefox on Windows uses it for the filled track, but the thumb may remain default. Test across browsers.

Alternatives: Custom Styled Controls

If you need full control over the appearance, you can use the appearance: none technique. This removes the native styling, allowing you to build a completely custom control. For a checkbox:

input[type="checkbox"] {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #333;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}
input[type="checkbox"]:checked {
  background: #4CAF50;
  border-color: #4CAF50;
}
input[type="checkbox"]:checked::after {
  content: "✓";
  color: white;
  display: block;
  text-align: center;
}

This gives you complete styling freedom but requires more CSS and careful handling of focus states and accessibility (e.g., using :focus-visible to show a visible outline). For most projects, accent-color is the simpler, more maintainable choice.

Performance and Maintainability

Using accent-color has zero performance cost—it’s a single CSS property that the browser applies natively. It also keeps your markup clean and avoids the need for JavaScript or image sprites. The main benefit is maintainability: change one line in your CSS and all matching controls update. This is especially useful for theme systems where you define a brand color as a CSS variable:

:root {
  --brand: #7c3aed;
}
input, progress {
  accent-color: var(--brand);
}

Then you can update the theme by changing only --brand.

Frequently Asked Questions

Does accent-color work on all form elements?

No. It works on input[type="checkbox"], input[type="radio"], input[type="range"], and progress. It does not work on select, textarea, or text inputs.

Can I use a gradient as accent-color?

No. accent-color accepts only a single color value, not gradients or images. If you need a gradient, you’ll have to build a custom control.

Will accent-color affect the focus outline?

No. The focus outline is drawn by the browser and is not affected by accent-color. You can style it separately with :focus-visible.

How do I make the checkbox color change when checked?

That’s exactly what accent-color does. When a checkbox is checked, the accent color fills the box. For a custom checkmark, you need the appearance: none approach.

Is accent-color supported in dark mode?

Yes, but you need to set color-scheme to let the browser know you support dark mode. Then accent-color will apply on top of the dark background.

Can I use accent-color with CSS variables?

Absolutely. accent-color: var(--my-color) works as long as the variable resolves to a valid color.

Related

• Fix Camera App Error 0x200f4246 0x80040154
• Android Alerts on Windows 10: How to Get Them
• PL2303 Driver Windows 11 Install Guide