CSS accent-color Property

Definition and Usage

The accent-color property sets the highlight color of a few native form controls. It colors the checked checkbox, the selected radio, and the filled part of a range or progress bar. It does not rebuild the control.

The property is inherited, so one declaration on a form themes every supported control inside it. Label text, buttons, and text fields do not change. Use color for text.

CSS Syntax

Property Values

How to Use accent-color

Set one color on the control, or on a parent so the children inherit it.

1. Use a supported control: checkbox, radio, range, or progress.
2. Set accent-color to any CSS color, or auto for the platform accent.
3. Put the declaration on the control or on a parent. The property is inherited.
4. Look at the checked or filled state. The label text will not change color.

Live Preview

Pick a color and watch the same value land on a checkbox, radio group, range, and progress bar.

CSS Examples

Short snippets that set only accent-color. Use Try It Yourself for a live editor.

<style>
  input {
    accent-color: red;
  }
</style>

<label>
  <input type="checkbox" checked>
  Check me out!
</label>

<style>
  form {
    accent-color: #2563eb;
  }
</style>

<form>
  <label>
    <input type="radio" name="plan" checked>
    Basic
  </label>
  <br>
  <label>
    <input type="radio" name="plan">
    Pro
  </label>
</form>

<style>
  input,
  progress {
    accent-color: seagreen;
  }
</style>

<p>
  <label for="volume">Volume</label><br>
  <input id="volume" type="range" min="0" max="100" value="70">
</p>
<p>
  <label for="done">Done</label><br>
  <progress id="done" value="70" max="100">70%</progress>
</p>

Key Takeaways