CSS Cor de Seleção

Personalizando a seleção de texto com ::selection

Quando o usuário destaca um trecho de texto na sua página — arrastando, dando duplo clique ou apertando Ctrl/Cmd + A — o navegador pinta um fundo padrão do sistema sobre as letras (azul no macOS, a cor de destaque no Windows). O pseudo-elemento ::selection permite sobrescrever essa pintura e alinhar com a identidade da marca. A sintaxe é direta:

::selection {
  background: #ff00de;
  color: white;
}

O Firefox historicamente exigia a versão com prefixo ::-moz-selection. A partir do Firefox 62 (2018) ele aceita a versão sem prefixo, mas declarar as duas ainda é comum para suporte legado e não causa problema.

O que dá — e o que não dá — para estilizar

A spec do W3C restringe o ::selection a uma whitelist pequena: background-color, color, text-shadow, text-decoration, caret-color e algumas propriedades de stroke/fill. Você não pode mudar font-size, border, padding nem aplicar linear-gradient como fundo — só cor sólida. Isso é intencional: refluxo de texto durante a seleção seria confuso e caro de repintar.

Seleção por escopo para code blocks e seções escuras

É possível escopar o ::selection por ancestral — a Stripe usa seleção roxa em todo o site de marketing mas troca por branco-no-preto dentro dos blocos de código da documentação:

::selection { background: #635bff; color: #fff; }
.code-block ::selection { background: #fff; color: #000; }

A propriedade complementar caret-color define a cor do cursor piscante em inputs e áreas contenteditable — combine com sua paleta de seleção para manter coesão visual.

Acessibilidade e modo escuro

O texto selecionado precisa continuar legível. O WCAG 1.4.3 exige razão de contraste de 4,5:1 entre color e o novo background — escolher amarelo neon sobre branco até funciona para alguns usuários, mas falha para qualquer pessoa com baixa visão. Para modo escuro, envolva um segundo seletor em @media (prefers-color-scheme: dark) e ajuste as cores para permanecerem legíveis no canvas escuro.

Suporte dos navegadores e performance

Suporte universal nos navegadores modernos (Chrome, Firefox, Safari, Edge — até o IE 9 implementava). Impacto de performance é zero: as cores só são pintadas durante uma seleção ativa. Stylesheets de impressão não precisam sobrescrever nada porque o estado de seleção não é preservado no papel.

Perguntas frequentes

Posso usar cores diferentes de seleção por seção da página? Sim. Seletores como article ::selection { background: gold } e footer ::selection { background: gray } convivem sem conflito. Quando a seleção atravessa a fronteira, cada elemento pinta com a regra do seu próprio escopo.

Dá para aplicar gradiente ou imagem como fundo da seleção? Não. A spec aceita apenas uma cor sólida. Os navegadores ignoram completamente gradientes e imagens em ::selection.

::selection com dois-pontos duplos é a mesma coisa que :selection? Não. Apenas a forma com dois-pontos duplos é válida — a variante com dois-pontos simples nunca foi padronizada e é silenciosamente ignorada por todos os navegadores.

Por que alguém deixaria o texto selecionado invisível? Alguns sites aplicam color: transparent na seleção dentro de exemplos de código para desestimular copy-paste de chaves de API ou frustrar scraping ingênuo. Não bloqueia usuários determinados, mas aumenta o atrito.