Adicione a cor da sua marca às entradas de formulários HTML integradas com apenas uma linha de código.
Os elementos de formulário HTML de hoje são difíceis de personalizar. É como se fosse uma escolha entre poucos ou nenhum estilo personalizado ou redefinir estilos de entrada e construí-lo do zero. Construir do zero acaba sendo muito mais de trabalho do que o previsto. Isso também pode levar a estilos esquecidos para estados de elementos. (indeterminado, para você) e a perda dos recursos de acessibilidade integrados. Para recriar totalmente o que o navegador fornece, pode ser mais trabalhoso do que você quer.
accent-color: hotpink;
CSS accent-color
da interface do CSS
especificação é feita para colorir
elementos com uma linha de CSS, evitando esforços de personalização
e é uma maneira de
colocar sua marca nos elementos.
![Captura de tela de tema claro de uma demonstração de cor de destaque em que
caixa de seleção, botões de opção, um controle deslizante de intervalo e um elemento de progresso
são todos coloridos em hotpink.](https://web.developers.google.cn/static/articles/accent-color/image/a-light-theme-screenshot-e2988ab5bb352.png?authuser=6&hl=pt-br)
A propriedade accent-color
também funciona com
color-scheme
, permitindo que os autores colorem os dois tons
elementos claros e escuros.
No exemplo a seguir, o usuário tem um tema escuro ativo, a página usa
color-scheme: light dark
e usa a mesma accent-color: hotpink
para cores escuras
em tons de hotpink com tema.
![Captura de tela do tema escuro de uma demonstração de cor de destaque em que
caixa de seleção, botões de opção, um controle deslizante de intervalo e um elemento de progresso
são todos coloridos em hotpink.](https://web.developers.google.cn/static/articles/accent-color/image/a-dark-theme-screenshot-5c090145c9c8e.png?authuser=6&hl=pt-br)
Elementos compatíveis
No momento, apenas quatro elementos serão tonalizados com a propriedade accent-color
:
caixa de seleção, rádio, intervalo e
progresso. Cada um pode ser visualizado aqui
https://accent-color.glitch.me em ambientes claros e
esquemas de cores escuras.
Caixa de seleção
Rádio
Intervalo
Progresso
Garantir o contraste
Para impedir a existência de elementos inacessíveis, os navegadores com accent-color
é preciso determinar um contraste qualificado
cor para ser usada junto com a
sotaque. Veja abaixo uma captura de tela que demonstra como o Chrome 94 (à esquerda) e o Firefox 92
Os algoritmos da opção noturna (à direita) são diferentes:
O mais importante a aprender é confiar no navegador. Forneça uma cor de marca e tenha certeza de que ela tomará decisões inteligentes para você.
Extra: mais tonalidade
Você pode estar se perguntando como colorir mais do que esses quatro elementos de formulário. Confira sandbox mínimo, que colore:
- o anel de foco
- destaques da seleção de texto
- lista de marcadores
- indicadores de seta (somente Webkit)
- barra de rolagem thumb (somente Firefox)
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }
:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
) {
color: var(--brand);
}
Futuro potencial
A especificação não limita a aplicação de accent-color
aos quatro elementos
como mostrado neste artigo, mais suporte pode ser adicionado no futuro. Elementos como o
o <option>
selecionado em uma <select>
pode ser destacado com o
accent-color
O que mais você gosta de pintar na Web? Enviar um tweet @argyleink com seu seletor e pode receber foi adicionada a esta matéria.