08/06/2007
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.






helio
08/06/2007 12:50 am
Bem interessante essa de selecionar o texto e mudar a cor de fundo. Ficou bem legal a materia.
Jack
18/06/2007 9:31 pm
Cada vez fico mais fascinado com os recursos que o CSS proporciona.
Marco Aurélio
08/12/2007 2:34 pm
Cara faz tempo que eu procuro isso man!! ehauheau! valew parcerão! feed salvo!
My Weblog (Pingback)
19/01/2008 3:03 pm
[…] CSS em textos selecionados pelo mouse - Richard Barros - Blog e Portfolio  save this […]
Carla ;D
29/11/2008 1:09 pm
eu cliquei no botão direito do mouse pra fazer isso so que nao deu porq já tem uum codigo como eu mudo?
:~~
beejo ;*