accent-color

Sets the color of form controls such as checkboxes and radio buttons. Instead of hiding the input and redrawing the checkbox with a span, you can keep the native control and change only its color.

property
Unlocked in December 2025MDN Document

Modern approach

accent-color is inherited, so setting it on :root changes the color of checkboxes, radio buttons, <input type="range">, and <progress> all at once. The controls aren’t hidden, so they work with the keyboard too.

:root {
  accent-color: #0a7d5a;
}
<input type="checkbox" id="agree" />
<label for="agree">I agree to the terms of service</label>

Legacy approach

The input was hidden with display: none, and a span inside the label redrew the box and the check mark. Because the input is hidden, it can’t be reached with the Tab key or operated from the keyboard.

.checkbox {
  display: none;
}

.checkbox-icon {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  border: 2px solid #767676;
  border-radius: 3px;
  box-sizing: border-box;
  vertical-align: -3px;
}

.checkbox:checked + label .checkbox-icon {
  border-color: #0a7d5a;
  background-color: #0a7d5a;
}

.checkbox:checked + label .checkbox-icon::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
<input type="checkbox" id="agree" class="checkbox" />
<label for="agree"><span class="checkbox-icon"></span>I agree to the terms of service</label>

Things to watch when replacing

  • Only checkboxes, radio buttons, <input type="range">, and <progress> change color. <select>, text inputs, and buttons stay the same. To use a different color for some controls, set it on those controls (such as input[type="range"]).
  • accent-color changes only the color. If your design also defines the border width, corner radius, or the shape of the check mark, keep the old technique. Even then, hiding the input visually instead of with display: none makes it operable from the keyboard.
  • The native checkbox may look smaller than the box drawn with the old technique. Match the size with width and height on the input.
  • If you leave display: none in place, the control won’t be shown, so remove the old CSS and the span before replacing.
  • In Chrome and Firefox, the browser picks the check mark color (white or black) based on its contrast with the accent color. In Safari on macOS, the check mark stays white even with a light color, which makes it hard to see.

Fallback

In browsers without support, the controls just appear in their default color and still work. All five target browsers support it, so you normally don’t need to keep the old technique.

Browser Support

  • Chrome

    v93+
    2021-08-31

  • Edge

    v93+
    2021-09-02

  • Safari

    v26.2+
    2025-12-12

  • Safari (iOS)

    v26.2+
    2025-12-12

  • Firefox

    v92+
    2021-09-07

Search by feature name or code

e.g. aspect-ratio, :has(), padding-top

Try a different word or a property name.

Could not load search.

↑↓MoveEnterOpenEscClose