Alterando cor da seleção padrão do texto com CSS3

Uma declaração CSS3 que poucos conhecem é capaz de alterar a cor padrão de uma seleção de texto na web, para uma cor de sua escolha. Sabemos que independente da cor da fonte e plano de fundo sempre que selecionamos um texto em uma página da web, a fonte por padrão é alterada para branco e a fundo para azul.

Esta declaração CSS não é suportada por todos os navegadores, atualmente o Firefox, Safari, Chrome, Internet Explorer 9 e Opera suportam este efeito com CSS3. Navegadores que não suportam esta declaração CSS apenas ignoram o código.

Esta técnica é uma bela forma de incrementar o design do seu website, apesar de não ser todo o visitante que verá o efeito, apenas os que selecionarem seu texto.

O efeito é alcançado com o pseudo-elemento ::selection. Veja o exemplo abaixo:

Código CSS:

p.vermelho::selection {
background:#FF0000;
color:#fff;
}
p.vermelho::-moz-selection {
background:#FF0000;
color:#fff;
}
p.vermelho::-webkit-selection {
background:#FF0000;
color:#fff;
}
p.laranja::selection {
background:#FF6600;
color:#fff;
}
p.laranja::-moz-selection {
background:#FF6600;
color:#fff;
}
p.laranja::-webkit-selection {
background:#FF6600;
color:#fff;
}