Altere a cor do texto selecionado do seu site

Categoria: CSS Data: 07/12/2011 Comentários: Comente

Já reparou que ao selecionar o texto em algum site, ele não está naquele azul tradicional? Trata-se de uma declaração do CSS3: o ::selection. Ela sobrescreve a cor padrão do seu navegador ou sistema. Infelizmente, este recurso funciona apenas em alguns navegadores, como o Chrome, Firefox, Safari em suas versões mais recentes.

text selection color Altere a cor do texto selecionado do seu site
Faça o teste e selecione algum texto do WebAngel, ele deve aparecer com a cor verde. Então vamos ao código:

{code type=css}
::selection {
background: #ffb7b7; /* Safari */
color:#000000;
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
color:#000000;
}

Se não quiser alterar a cor do texto durante a seleção basta remover a linha “color:…”. Se quiser aplicar cores diferentes ao longo da página, basta aplicar classes:

{code type=css}
div.conteudo::selection {
background: #ffb7b7; /* Safari */
color:#000000;
}
div.conteudo::-moz-selection {
background: #ffb7b7; /* Firefox */
color:#000000;
}

Pronto. Seu site está personalizado!

As coisas que vou aprendendo vão sendo compartilhadas aqui.

Conexões: WebSite | Facebook | Google +


Forçando alteração de CSS em linha

Centralizando um elemento no meio da página

Para colocar código nos comentários inicie com as tags <pre><code> e feche com </code></pre>.

Newsletter
Receba dicas e tutoriais em seu email
© Webangel - 2013