color

accent-color: styling native form controls

One property to tint every native form control. No more rebuilding checkboxes from scratch just to change their color.

What accent-color styles

The accent-color property controls the tint color of user-interface controls generated by the browser. It affects these elements:

<input type="checkbox"> — the checked fill color
<input type="radio"> — the selected dot color
<input type="range"> — the filled track and thumb
<progress> — the filled bar

/* Set globally — all controls match your brand */
:root {
  accent-color: oklch(0.65 0.2 280);
}

/* Or target specific elements */
input[type="checkbox"] {
  accent-color: oklch(0.7 0.18 150);
}

progress {
  accent-color: oklch(0.6 0.22 250);
}

The auto value

The default value is auto, which uses the browser's default accent color (typically blue). The accent-color property is inherited, so setting it on the root affects all controls unless overridden:

/* auto = browser default (usually blue) */
:root { accent-color: auto; }

/* Set once at the root, override where needed */
:root {
  accent-color: oklch(0.65 0.2 280);
}

.success-form input {
  accent-color: oklch(0.7 0.2 150);
}

.danger-form input {
  accent-color: oklch(0.65 0.25 25);
}

The browser automatically picks a contrasting color for the checkmark or radio dot based on your accent-color. You don't need to specify a foreground color.

Interaction with color-scheme

The color-scheme property tells the browser whether an element should render in light or dark mode. Combined with accent-color, you get properly themed native controls:

:root {
  color-scheme: light dark;
  accent-color: oklch(0.65 0.2 280);
}

/* Dark sections with adapted controls */
.dark-section {
  color-scheme: dark;
  accent-color: oklch(0.75 0.18 280);
  /* Lighter accent for dark backgrounds */
}

/* Light sections */
.light-section {
  color-scheme: light;
  accent-color: oklch(0.55 0.22 280);
  /* Darker accent for light backgrounds */
}

When color-scheme: dark is active, form control backgrounds, borders, and unchecked states adapt automatically. Your accent-color only controls the active/checked state tint.

Limitations and workarounds

accent-color is intentionally limited. It provides brand-consistent tinting without breaking the native look and feel. Here's what it cannot do:

It doesn't affect <select> dropdowns, <input type="date"> pickers, or <input type="file"> buttons.
You can't set the unchecked/inactive color — that's controlled by color-scheme.
Gradients and images are not valid values — only solid colors.
The checkmark color is chosen by the browser for contrast; you can't override it.

/* For full control, use appearance: none and rebuild */
input[type="checkbox"].custom {
  appearance: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  border: 2px solid oklch(0.6 0 0);
  border-radius: 0.25em;
  display: grid;
  place-content: center;
}

input[type="checkbox"].custom:checked {
  background: oklch(0.65 0.2 280);
  border-color: oklch(0.65 0.2 280);
}

Use accent-color for quick brand alignment. Only reach for appearance: none when you need pixel-perfect custom designs — it means rebuilding all states and accessibility features yourself.

Practical form example

A complete themed form using accent-color alongside custom properties for consistency:

:root {
  --brand: oklch(0.65 0.2 280);
  --brand-light: oklch(0.8 0.1 280);
}

form {
  accent-color: var(--brand);
  color-scheme: light dark;
}

/* Range input with matching focus ring */
input[type="range"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* Progress with accent and track styling */
progress {
  accent-color: var(--brand);
  border-radius: 0.5em;
  block-size: 0.75em;
}