::selection
O pseudo-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 longhandstext-decoration
and its associated propertiestext-emphasis-color
text-shadow
Aviso: Em particular, background-image
é ignorada.
Sintaxe
/* Sintaxe legado do Firefox (até a versão 61) */ ::-moz-selection Error: 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
/* 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 a taxa 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 atuais Diretrizes 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
Especificações
Specification |
---|
CSS Pseudo-Elements Module Level 4 # selectordef-selection |
Compatibilidade com navegadores
BCD tables only load in the browser
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.