accent-color for theming native form controls

Checkbox, radio, range, and progress native form elements are difficult to style and typically require completely hiding the native element and building a custom replacement from scratch.

Use accent-color to apply a brand color to native form controls with one line of CSS:

/* Global accent color */
:root {
  accent-color: #3b82f6; /* your brand color */
}

/* Per-element accent */
input[type="checkbox"] {
  accent-color: #10b981; /* green checkboxes */
  width: 1.2em;
  height: 1.2em;
}

input[type="range"] {
  accent-color: #f59e0b; /* amber slider */
}

progress {
  accent-color: #6366f1; /* purple progress bar */
}

/* Dark mode adaptation */
@media (prefers-color-scheme: dark) {
  :root {
    accent-color: #60a5fa; /* lighter blue for dark backgrounds */
  }
}

accent-color is a CSS property that applies the specified color to the checked/active state of checkboxes, radios, progress bars, and range sliders — native elements that previously required JavaScript-driven custom components to style.

Branding native form elements without replacing them with custom components.