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-color
atualmente 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;
}