CSS em textos selecionados pelo mouse

Pouca gente sabe que é possível alterar o estilo (cor de texto e fundo) de um texto selecionado pelo usuário. Eu, por exemplo, tenho mania de ir selecionando o texto enquanto leio e é interessante ter uma cor de seleção que acompanhe o layout do site e que seja agradável.

Para mudar a cor da seleção (somente Mozilla e Safari), usamos o seguinte código:

::-moz-selection{
background:#036;
color:#FFF;
}
::selection {
background:#036;
color:#FFF;
}

Se quiser uma cor diferente para uma tag em especial, como <pre>, <p> ou <b>, basta colocar:

pre::-moz-selection{
background:#CCC;
color:#FFF;
}
pre::selection {
background:#CCC;
color:#FFF;
}
/* Este código está dentro de uma tag <pre>.
Selecione aqui e veja como está diferente
do restante do site */

Um bom exemplo de usabilidade é definir com cores fortes um alto contraste para tornar o site acessível a portadores de deficiência visual como o daltonismo (o da APADA, por exemplo). Assim, caso o usuário tenha dificuldade de ler na cor padrão, pode tentar selecionar o texto assim e obter outra solução para as cores de leitura.

Hoje alguns sites, principalmente os regulamentados pelo governo federal, já possuem um botão próprio para trocar o contraste do layout pensando nesta questão da acessibilidade visual. Se fosse aceito no IE, este CSS seria uma boa alternativa (menos sofisticada, é claro) para realizar essa integração. Pena.

Compartilhe: