pular para o conteúdo [1]

Artigos sobre Front-End e Programação web

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

exemplo css selection
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;
}
Se você está usando um navegador compatível como citado acima, aqui você pode ver um exemplo do CSS ::selection funcionando.

3 Comentários

  1. Muito bom kadu =D Show d bola … vlw msm!

  2. Até isso dá pra fazer com o CSS3?! Wow ! esse css3 vei pra fascilitar a vida dos web designers ;D

    Danilo Ramos – cssorbit.com

  3. Sempre via essa alteração em sites mas nunca parei para pesquisar. De primeira encontrei seu post! Obrigado 🙂

Topo