Opseudo-elemento CSS::selection aplica estilos para partes do documento que foram selecionadas pelo usuário (tal como clicar e arrastar o ponteiro do mouse através de um texto.

::selection {  background-color: cyan;}

Propriedades permitidas

Apenas certas propriedades podem ser usadas com o::selection:

• color
• background-color
• cursor
• caret-color
• outline and its longhands
• text-decoration and its associated properties
• text-emphasis-color
• text-shadow

Sintaxe

/* Sintaxe legado do Firefox (até a versão 61) */::-moz-selectionError: could not find syntax for this item

Exemplo

HTML

Esse texto tem estilos especiais quando selecionado.<p>Tente selecionando também o texto nesse parágrafo.</p>

CSS

::-moz-selection {  color: gold;  background-color: red;}p::-moz-selection {  color: white;  background-color: blue;}

/* Texto selecionado dourado com o fundo vermelho */::selection {  color: gold;  background-color: red;}/* Texto selecionado branco com o fundo azul */p::selection {  color: white;  background-color: blue;}

Resultado

Preocupações com acessibilidade

Não substitua os estilos de texto selecionados por razões puramente estéticas — os usuários podem personalizá-los para atender às suas necessidades. Para pessoas com problemas cognitivos ou com menos conhecimento tecnológico, alterações inesperadas nos estilos de seleção podem prejudicar sua compreensão da funcionalidade.

Se substituído, é importante garantir que ataxa de contraste entre o texto e as cores de plano de fundo da seleção seja alta o suficiente para que pessoas com condições de baixa visão possam lê-lo.

A taxa de contraste da cor é encontrada comparando a luminosidade do texto selecionado e as cores de fundo do texto selecionado. Para atender às atuaisDiretrizes de acessibilidade de conteúdo da Web (WCAG), o conteúdo de texto deve ter uma taxa de contraste de 4.5:1 ou 3:1 para texto maior, como títulos. (WCAG define texto grande entre 18,66 px e 24 px e negrito, ou 24 px ou maior.)

Facilite para os usuários ver e ouvir o conteúdo, incluindo a separação do primeiro plano do segundo plano

• WebAIM: Verificador de Constraste de Cor
• MDN Understanding WCAG,1.4: Facilite para os usuários vizualizarem o conteúdo, incluindo a separação do primeiro plano do segundo plano (em inglês).
• Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

Especificações

Compatibilidade com navegadores

Veja também

• pointer-events - permite autores controlarem sob qualquer circustancia(se houver) um elemento gráfico particular podendo ser o alvo do evento do mouse.