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
Bem interessante essa de selecionar o texto e mudar a cor de fundo. Ficou bem legal a materia.
Jack
Cada vez fico mais fascinado com os recursos que o CSS proporciona.
Marco Aurélio
Cara faz tempo que eu procuro isso man!! ehauheau! valew parcerão! feed salvo!
Carla ;D
eu cliquei no botão direito do mouse pra fazer isso so que nao deu porq já tem uum codigo como eu mudo?
:~~
beejo ;*
Vanessa Luiza
Amei,
obrigada.
k00dez
No chrome não funcionou.
Vitor Melo
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.
Rudimara
procurava a mto tempo!
ameeei (:
Peacemaker
Thanks man, código muito útil.
Lucas Dantas
Valeu, Richard! O meu funcionou perfeitamente no Google Chrome e no Internet Explorer 9, além do Firefox.
thiago
Muito obrigado, exatamente o que eu procurava
DIRTY CREATIVE
É de fato é bom mesmo esse css de selection…vlw..
Junior
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.