CSS: Como funciona a propriedade accent-color?

Alguns elementos de formulário são bastante complicados de estilizar. Parece que os navegadores não entram num consenso no momento de definir os estilos do input[type=file] ou input[type=range], por exemplo, fazendo com que tenhamos certo trabalho no momento de estilizar cores ou padrões para o mesmo.

Porém, temos uma nova propriedade, que pode nos ajudar um pouco:

A propriedade accent-color

A propriedade do CSS accent-color define a cor de destaque para os controles da interface do usuário gerados por alguns elementos.

Por exemplo, se você quiser definir que todos os elementos em destaque tenham a cor vermelha, basta fazer assim:

:root {
    accent-color: red;
}

Os navegadores que oferecem suporte accent-coloratualmente o aplicam aos seguintes elementos HTML:

• <input type="checkbox">

• <input type="radio">

• <input type="range">

• <progress>

Você também pode definir a cor de destaque em diferentes regras de estilo. Por exemplo:

<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />

input {
  accent-color: pink;
  display: block;
  width: 30px;
  height: 30px;
}
input.custom {
accent-color: rebeccapurple;
}

Para definir o valor padrão do navegador, você pode simplesmente definir o valor de accent-color para auto.

.default-accent-color {
    accent-color: auto;
}