Substituindo a cor da seleção do texto com CSS

A uns dias atrás o diretor de arte que trabalha aqui na agência me questionou sobre a possibilidade de alterar a cor da seleção do texto, que na máquina dele aparecia em um tom de rosa. Pois bem, essa possibilidade existe no CSS, através da propriedade ::selection.

::selection { background: #1f6a8f; color: #fff; } ::-moz-selection { background: #1f6a8f; color: #fff; }

Esta propriedade funciona nos navegadores Safari, Chrome, Opera e IE9, e no Firefox com a adição do prefixo -moz-. Ela permite personalizarmos a cor de fundo que aparece no momento em que um texto é selecionado (background-color), assim como a cor do texto (color).

Com a propriedade ::selection também é possível determinar diferentes cores de seleção de texto para os elementos, como podemos ver no exemplo abaixo:

 p.azul::selection { background: #0066ff; } p.azul::-moz-selection { background: #0066ff; } p.verde::selection { background: #66ff00; } p.verde::-moz-selection { background: #66ff00; } p.vermelho::selection { background: #ff0000; } p.vermelho::-moz-selection { background: #ff0000; }

Gostou da dica? Então comente e compartilhe ;)

Artigos Relacionados: