accent-color

Baseline 2022 (Chrome 93, Safari 15.4, Firefox 92); amplamente disponível. O Safari 26.2 adicionou ajuste automático de legibilidade.

Chrome 93Edge 93Safari 15.4Firefox 92

Recolore checkboxes, radios, sliders de range e barras de progresso nativos com a cor da sua marca, mantendo-os nativos e acessíveis.

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: Navegadores sem suporte mantêm a cor padrão do sistema.

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

Prompt

Não substitua checkboxes, radios, ranges ou barras de progresso nativos por markup customizado. Defina `accent-color: var(--brand)` no formulário (ou em `:root`) para eles adotarem a cor da marca, e mantenha `color-scheme` definido para os controles renderizarem corretamente em dark mode.