10

Quando selecionamos um texto com o mouse em um website o texto fica com uma cor branca e com um fundo azul (acho que pode variar de navegador para navegador). Porém eu gostaria de saber se é possível trocar a cor e o fundo desse texto somente com CSS, e se tem uma solução que dê suporte aos diversos navegadores.

Veja um exemplo da alteração que eu gostaria de fazer:

inserir a descrição da imagem aqui

6
  • 2
    Apenas isto ::selection
    – LeAndrade
    Commented 24/10/2018 às 20:58
  • Mas só com esse pseudo-elemento os efeitos vão ser aplicados em todos os navegadores? Commented 24/10/2018 às 21:10
  • A partir de: Chrome 4.0, IE 9.0, Firefox 2.0, Safari 3.1, Opera 10.1. Sendo que para o Firefox é necessário utilizar o prefixo -moz-
    – LeAndrade
    Commented 24/10/2018 às 21:15
  • Talvez este link possa te ajudar: css-tricks.com/… Commented 24/10/2018 às 22:30
  • 1
    @LeAndrade Show mano! Obrigado pelo aviso, é de grande ajuda! Commented 25/10/2018 às 2:13

2 Respostas 2

5

Você consegue esse efeito usando o pseudo-elemento ::selection.

O pseudo-element tem suporte para a maioria dos navegadores inclusive IE-9, mas na data de hoje 24/10/18 não há suporte para o IOS Safari e nem para o Opera Mini como pode ser visto no site Can I Use.

Ficaria da seguinte forma:

::selection {
    background-color: red;
    color: lightgreen;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae porta purus, in tincidunt dui. Ut ut neque neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut porttitor convallis purus sed porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ac velit turpis. Integer sed dui quam. Suspendisse laoreet aliquam velit, sed interdum sapien. Donec id nisl non libero vehicula malesuada rutrum auctor ex. </p>

Obs: Para versões <=61 do firefox, é necessário utilizar a seguinte sintaxe:

::-moz-selection

Referência: https://developer.mozilla.org/en-US/docs/Web/CSS/::selection

1
  • Obrigado pelo exemplo e pelas dicas em relação aos navegadores Jorge! Commented 25/10/2018 às 2:12
4

Você pode utilizar a propriedade css ::selection, fiz um breve exemplo para facilitar no aprendizado.

.exemplo-background::selection {
  background: #e74c3c;
}

body {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  line-height: 1.45;
  background: #E0DCCC;
  color: #333;
  padding: 1em;
  font-size: 18px;
}
<p class='exemplo-background'>Você pode alterar a cor de fundo ao selecionar esse texto.</p>

https://codepen.io/anon/pen/mzQLyO

2
  • Obrigado pelo exemplo André! Muito bom! Commented 25/10/2018 às 2:11
  • Valeu @JoãoPedroSchmitz, abraços! Commented 25/10/2018 às 11:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .