Como mudar a cor do texto selecionado no meu site ou blog via CSS

Com atributo CSS de simples aplicação é possível determinar a cor do texto selecionado pelo mouse em seu site ou blog. Aprenda como fazer.

Pode parecer pouca coisa, mas é exatamente o cuidado com pequenos detalhes que podem gerar surpresas agradáveis para seu público. É assim para marcas, produtos e também para seu site ou blog. O recurso em questão se trata de uma aplicação em CSS com a qual você pode indicar como serão as cores do texto selecionado pelo mouse.

Tanto o código quanto sua aplicação são bem simples, mas é bom ter algum conhecimento em CSS para garantir que não exista erro. Basta copiar:

::selection { background: #COR DA SELEÇÃO; color: #COR DA FONTE; } ::-moz-selection { background: #COR DA SELEÇÃO; color: #COR DA FONTE; }

Lembre-se de determinar os campos "COR DA SELEÇÃO" e "COR DA FONTE" pelos valores das cores que você quer aplicar.

Este recurso é visível nos navegadores Chrome, Firefox (por causa da tag -moz-), Safari, Opera e IE9. Você pode também demarcar a cor da seleção em áreas específicas da página, como no exemplo abaixo, onde o "p" indica a tag <p>, de parágrafo.

p::selection { background: #0066ff; } p::-moz-selection { background: #0066ff; }

Aplicação no Blogger

Para aplicar no Blogger você pode ir em seu painel e acessar Modelo > Personalizar > Avançado > Adicionar CSS, inserir o código e salvar a alteração. Outra opção é ir em Modelo > Editar HTML, clicar na tag <b:skin> para abrir o CSS, inserir o atributo e salvar as alterações.

Aplicação no Wordpress

No Wordpress você pode usar o campo de inserção de CSS (cujo local depende do seu tema escolhido) e adicionar o atributo, parecido com a primeira opção de configuração para Blogger. Outra opção é acessar seu painel, clicar em Aparência > Editor > Folha de Estilo (style.css) na barra lateral, inserir o código e salvar as alterações.

Para ver como funciona, basta selecionar o texto aqui no blog para ver que adicionei uma seleção meio laranja com a fonte branca. Divirta-se escolhendo a melhor cor para o seu.