Adicione as cores da sua marca às entradas de formulário HTML integradas com uma linha de código.
Os elementos de formulário HTML atuais são difíceis de personalizar. É como se fosse uma escolha entre poucos ou nenhum estilo personalizado ou redefinir estilos de entrada e criá-los do zero. Construir tudo do zero acaba sendo muito mais trabalhoso do que o previsto. Isso também pode levar ao esquecimento de estilos para estados de elementos (indeterminado, estou de acordo com você) e à perda de recursos de acessibilidade integrados. Recriar completamente o que o navegador oferece pode ser mais trabalhoso do que você quer.
accent-color: hotpink;
O CSS accent-color, da especificação da interface
do CSS (em inglês), existe para colorir
os elementos com uma linha de CSS, evitando esforços de personalização,
fornecendo uma maneira de trazer sua marca aos elementos.
A propriedade accent-color também funciona com
color-scheme, permitindo que os autores tomem
os 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 o mesmo accent-color: hotpink para controles
em tons de rosa com tema escuro.
Elementos compatíveis
Atualmente, apenas quatro elementos serão coloridos pela propriedade accent-color:
caixa de seleção, rádio, intervalo e
progresso. Confira uma prévia de cada um em
https://accent-color.glitch.me, em esquemas de cores
claras e escuras.
Caixa de seleção
Rádio
Intervalo
Progresso
Garantir o contraste
Para evitar elementos inacessíveis, os navegadores com accent-color
precisam determinar uma cor de contraste
qualificada para ser usada com o destaque
personalizado. Veja abaixo uma captura de tela que demonstra como os algoritmos do Chrome 94 (à esquerda) e do Firefox 92
Nightly (à direita) diferem:
O ponto mais importante é confiar no navegador. Informe a cor da marca e tenha a confiança de que ela tomará decisões inteligentes para você.
Extra: mais tonalidade
Você deve estar se perguntando como colorir mais desses quatro elementos de formulário. Confira uma sandbox mínima que colore:
- o anel de foco
- destaques da seleção de texto
- listar marcadores
- indicadores de seta (somente Webkit)
- ícone da barra de rolagem (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 em potencial
A especificação não limita a aplicação do accent-color aos quatro elementos
mostrados neste artigo. Mais compatibilidade pode ser adicionada depois. Elementos como o
<option> selecionado em um <select> podem ser destacados com o
accent-color.
O que mais você gosta de pintar na Web? Envie um tweet para @argyleink com seu seletor para que ele seja adicionado a este artigo.