accent-color

Baseline 2022 (Chrome 93, Safari 15.4, Firefox 92); breit verfügbar. Safari 26.2 hat eine automatische Lesbarkeitsanpassung ergänzt.

Chrome 93Edge 93Safari 15.4Firefox 92

Färbt native Checkboxen, Radios, Range-Slider und Fortschrittsbalken in deine Markenfarbe um, während sie nativ und barrierefrei bleiben.

Checked Radio

CSS

.fx-017 {
  accent-color: #7c3aed;
  font-family: system-ui;
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap
}
.fx-017 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

HTML

<div class="fx-017">
  <label><input type="checkbox" checked> Checked</label>
  <label><input type="radio" name="r" checked> Radio</label>
  <input type="range"> <progress value="60" max="100"></progress>
</div>

Fallback: Browser ohne Unterstützung behalten die OS-Standardfarbe.

Quelle: webkit.org/blog/17640/webkit-features-for-safari-26-2/

Prompt

Ersetze native Checkboxen, Radios, Ranges oder Fortschrittsbalken nicht durch eigenes Markup. Setze `accent-color: var(--brand)` auf das Formular (oder `:root`), damit sie die Markenfarbe übernehmen, und halte `color-scheme` gesetzt, damit Dark-Mode-Controls korrekt rendern.