Skip to content
Sobre Blog Aprender Explorar padrões Case studies
Nesta página
  • Elementos suportados
    • Caixa de seleção
    • Botão de seleção
    • Intervalo
    • Progresso
  • Garantindo contraste
  • Extra: Mais cores
    • Futuro potencial
  • Home
  • All articles

CSS accent-color

Traga a cor da sua marca para as entradas de formulário HTML integradas com uma linha de código.

Aug 11, 2021
Available in: English, Español, 中文 e 한국어
Adam Argyle
Adam Argyle
TwitterGitHubGlitchHomepage
Joey Arhar
Joey Arhar
TwitterGitHub
Nesta página
  • Elementos suportados
    • Caixa de seleção
    • Botão de seleção
    • Intervalo
    • Progresso
  • Garantindo contraste
  • Extra: Mais cores
    • Futuro potencial

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.

Uma captura de tela de tema leve de uma demonstração de cores de destaque em que caixa de seleção, botões de opção, um controle deslizante de intervalo e elemento de progresso são todos na cor rosa choque.
Demo

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.

Uma captura de tela de tema escuro de uma demo accent-color onde caixa de seleção, botões de seleção, um controle deslizante de intervalo e um elemento de progresso estão na cor rosa choque.
Demo

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.

Aviso

Se os seguintes elementos de demonstração forem todos da mesma cor, então seu navegador ainda não oferece suporte para accent-color.

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:

Uma captura de tela do Firefox e Chromium lado a lado, renderizando um espectro completo de caixas de seleção em vários tons e sombras.

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ê.

O navegador não mudará sua cor em um tema escuro.

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!

CSS
Last updated: Aug 11, 2021 — Improve article
Return to all articles
Compartilhar
assinar

Contribute

  • Registrar um bug
  • Visualizar código-fonte

Conteúdo relacionado

  • developer.chrome.com
  • Atualizações do Chrome
  • Estudos de caso
  • Podcasts
  • Shows

Conectar

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • Todos os produtos
  • Termos e privacidade
  • Diretrizes da comunidade

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.