CSS accent-color
Traga a cor da sua marca para as entradas de formulário HTML integradas com uma linha de código.
Os elementos de formulário HTML de hoje são difíceis de personalizar. Parece que é uma escolha entre poucos ou nenhum estilo personalizado, ou redefinir estilos de entrada e construí-los do zero. Construir do zero acaba sendo muito mais trabalhoso do que o previsto. Também pode levar a estilos esquecidos de estados de elemento ( indeterminado, estou olhando para você) e à perda de recursos de acessibilidade integrados. Recriar totalmente o que o navegador oferece pode ser mais trabalhoso do que você está procurando.
accent-color: hotpink;A accent-color de destaque CSS da especificação da interface do usuário CSS está aqui para tingir os elementos com uma linha de CSS, poupando você dos esforços de personalização ao fornecer uma maneira de trazer sua marca para os elementos.
O accent-color também funciona com o color-scheme, permitindo aos autores colorir 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 usa a mesma accent-color:hotpink para controles rosa choque com tema escuro.
Suporte para navegador #
No momento da elaboração deste artigo, o Chromium (a partir da versão 93) e o Firefox (a partir da versão 92) suportavam o recurso accent-color.
Elementos suportados #
Atualmente, apenas quatro elementos serão tingidos por meio da propriedade accent-color: caixa de seleção, botão de seleção, intervalo e progresso. Cada um pode ser visualizado aqui https://accent-color.glitch.me em esquemas de cores claras e escuras.
Caixa de seleção #
Botão de seleção #
Intervalo #
Progresso #
Garantindo contraste #
Para evitar a existência de elementos inacessíveis, os navegadores com accent-color precisam determinar uma cor de contraste compatível a ser usada junto com o destaque personalizado. Abaixo está uma captura de tela que demonstra como o Chrome 94 (esquerda) e o Firefox 92 Noturno (direita) diferem em seus algoritmos:
O mais importante a tirar disso é confiar no navegador. Forneça a cor da marca e confie que ela tomará decisões inteligentes para você.
Extra: Mais cores #
Você pode estar se perguntando como tingir mais do que esses quatro elementos do formulário? Aqui está uma sandbox mínimo que tinge:
- o anel de foco
- destaques da seleção de texto
- marcadores de lista
- indicadores de seta (apenas Webkit)
- miniatura da barra de rolagem (apenas 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 da propriedade accent-color aos quatro elementos mostrados neste artigo; mais suporte pode ser adicionado posteriormente. Elementos como a <option> selecionada em uma <select> podem ser destacados com a accent-color destaque.
O que mais você gostaria de colorir na Web? Tuíte marcando @argyleink com seu seletor e ele pode ser adicionado a este artigo!