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.

Gostou do artigo? Siga-me no Twitter @richardbarros

14 comentá em “CSS em textos selecionados pelo mouse

  1. helio 08/06/2007 00:50

    Bem interessante essa de selecionar o texto e mudar a cor de fundo. Ficou bem legal a materia.

    Responder

  2. Jack 18/06/2007 21:31

    Cada vez fico mais fascinado com os recursos que o CSS proporciona.

    Responder

  3. Marco Aurélio 08/12/2007 14:34

    Cara faz tempo que eu procuro isso man!! ehauheau! valew parcerão! feed salvo!

    Responder

  4. Pingback: My Weblog
  5. Carla ;D 29/11/2008 13:09

    eu cliquei no botão direito do mouse pra fazer isso so que nao deu porq já tem uum codigo como eu mudo?
    :~~
    beejo ;*

    Responder

  6. k00dez 19/02/2010 16:17

    No chrome não funcionou.

    Responder

  7. Vitor Melo 05/03/2010 09:14

    Muito interessante, sempre via alguns sites com esse efeito, mas achava que era algo relacionado ao seletor color, por isso, achava que ele sempre invertia as cores deste seletor ao selecionar, muito interessante, é um dos primeiros blogs sobre css que não fica na mesmice de assuntos, parabéns.

    Responder

  8. Rudimara 15/06/2010 03:30

    procurava a mto tempo!
    ameeei (:

    Responder

  9. Lucas Dantas 03/12/2011 12:14

    Valeu, Richard! O meu funcionou perfeitamente no Google Chrome e no Internet Explorer 9, além do Firefox.

    Responder

  10. thiago 20/04/2012 11:43

    Muito obrigado, exatamente o que eu procurava

    Responder

  11. Junior 05/11/2012 11:55

    Achei um problema nisso: Se usar a versão simplificada, sem determinar o elemento a ser estilizado, a seleção não fica totalmente na cor selecionada. O fundo (percebido quando um texto não chega até o fim da linha) continua na cor padrão azul. Isto não cai bem. Neste caso é melhor manter a cor padrão mesmo.
    Tentei contornar isto de forma simples mas não consegui. O efeito da selection no elemento body ou mesmo na minha div de conteúdo, não pegou.

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>