W3docs
pt
Entrar

Pseudo-elemento CSS ::selection

Use o pseudo-elemento CSS ::selection para selecionar e estilizar partes do documento. Saiba mais e experimente exemplos práticos.

O pseudo-elemento ::selection seleciona a parte de um documento que o usuário destacou — por exemplo, clicando e arrastando o mouse sobre o texto, ou pressionando Ctrl/Cmd + A. Ele permite substituir a aparência padrão de destaque do navegador para que o texto selecionado corresponda à sua marca ou melhore o contraste.

Por padrão, o navegador exibe o texto selecionado com a cor de destaque do sistema operacional (geralmente um fundo azul com texto branco). Estilizar o ::selection substitui esse padrão para os elementos que você selecionar.

Este capítulo abrange a sintaxe, quais propriedades são permitidas, peculiaridades de prefixos de navegador e exemplos práticos para texto, múltiplas cores e campos de formulário.

Por que e quando usá-lo

Um estilo de seleção personalizado é um pequeno detalhe que faz um site parecer mais refinado:

  • Consistência de marca — combine o destaque com sua cor de destaque em vez do azul padrão do sistema operacional.
  • Legibilidade — em um fundo escuro ou de baixo contraste, o destaque padrão pode dificultar a leitura do texto; você pode escolher uma combinação com contraste garantido.
  • Escopo — aplique cores de destaque diferentes a seções diferentes (por exemplo, blocos de código vs. texto do corpo).

Mantenha o texto selecionado legível: sempre defina tanto color quanto background-color juntos para nunca acabar com, por exemplo, texto branco sobre um destaque quase branco.

Quais propriedades são permitidas

O ::selection ignora a maioria das regras CSS. Apenas um conjunto pequeno e fixo de propriedades de CSS pode ser usado para estilizá-lo:

Propriedades como font-size, font-family, margin ou transform não têm efeito sobre o texto selecionado — a seleção é apenas um destaque no momento da renderização, não uma caixa real que você pode mover ou redimensionar.

Informação

O Firefox historicamente usava uma forma com prefixo de fornecedor, ::-moz-selection. Para suportar versões mais antigas do Firefox, declare a regra com prefixo antes da regra padrão ::selection, como nos exemplos abaixo.

Este pseudo-elemento foi introduzido no CSS Selectors Level 3, depois removido, e agora faz parte da especificação CSS Pseudo-Elements Level 4.

Padrão e versão

CSS Pseudo-Elements Level 4

Sintaxe

Pseudo-elemento CSS ::selection

::selection {
  css declarations;
}

Exemplo do pseudo-elemento ::selection:

Exemplo de código CSS ::selection

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ::-moz-selection {
        color: #eee;
        background: #8ebf42;
      }
      ::selection {
        color: #eee;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>
Experimente Você Mesmo »

Exemplo do pseudo-elemento ::selection com cores diferentes:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .green::-moz-selection {
        background-color: #8ebf42;
      }
      .green::selection {
        background-color: #8ebf42;
      }
      .yellow::-moz-selection {
        background-color: #FFFF19;
      }
      .yellow::selection {
        background-color: #FFFF19;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>This is a text with the default selection background-color.</p>
    <p class="green">Select this text to see a green background.</p>
    <p class="yellow">Select this text to see a yellow background.</p>
  </body>
</html>
Experimente Você Mesmo »

Exemplo do pseudo-elemento ::selection com as tags <textarea> e <input>:

CSS ::selection, outro exemplo de código

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input::-moz-selection {
        color: #1c87c9;
        background-color: #eee;
      }
      input::selection {
        color: #1c87c9;
        background-color: #eee;
      }
      textarea::-moz-selection {
        color: white;
        background-color: #8ebf42;
      }
      textarea::selection {
        color: white;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>Input element</p>
    <form>
      <input type="text" value="Select this input text" />
      <p>Textarea element</p>
      <textarea rows="5" cols="25">Select this textarea text</textarea>
    </form>
  </body>
</html>
Experimente Você Mesmo »

Pontos importantes a considerar

  • Não herda como propriedades normais. Uma regra ::selection aplica-se ao elemento que ela seleciona; não é um valor que cascateia para os filhos selecionados da mesma forma que color. Para estilizar a seleção em todo o site, escreva uma regra em um seletor amplo como ::selection (corresponde a tudo) ou body ::selection.
  • O fundo deve ser suficientemente opaco para ser visível. Um background-color com alfa muito baixo pode ser difícil de ver sobre o fundo existente.
  • Limitado à sua lista de propriedades. Se uma declaração parece não ter efeito, verifique a lista permitida acima — provavelmente está sendo ignorada.

Para aprofundar-se nas propriedades individuais que você pode usar aqui, consulte color, background-color e text-shadow.

Prática

Prática
O que você pode alcançar usando o pseudo-elemento ::selection em CSS?
O que você pode alcançar usando o pseudo-elemento ::selection em CSS?
Was this page helpful?