Publicado por: Paulo Fernandes | 21/set/2011

Enriqueça a experiência do website com personalização, utilize o ::selection

Olá pessoal.

As coisas na movin’ on andam muito bem e um novo cliente pediu uma funcionalidade muito peculiar. Ele queria que quando os usuários selecionassem alguma coisa no site, ele mudasse a cor de fundo e da seleção, fugindo do padrão azul e branco.

Esse cliente é muito bom e falou, tem que funcionar em browser moderno, foi o que precisava ouvir. :)

Alias é tudo que os desenvolvedores da nossa área querem né?!

Para fazer isso usei o pseudo-element ::selection

Só para variar um pouco, os navegadores não seguem um padrão, mas dessa vez o que foge do padrão é o Firefox.

Veja o código necessário para funcionar no IE e no Chrome.

::selection { background:#bada55; color:#ffffff; }

 

Agora veja o código para funcionar no Firefox.

::-moz-selection{ background:#bada55; color:#ffffff; }

 

Nesse elemento, você pode mudar a cor de fundo (background-color) e a cor do texto (color).

Veja o exemplo de uso do selection – CSS3

Até o próximo


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Sair / Alterar )

Imagem do Twitter

You are commenting using your Twitter account. Sair / Alterar )

Foto do Facebook

You are commenting using your Facebook account. Sair / Alterar )

Connecting to %s

Categorias

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.