Propriedade CSS user-select
A propriedade CSS user-select define a seleção de texto. Leia sobre os valores da propriedade e veja exemplos.
A propriedade CSS user-select controla se o usuário pode selecionar texto com o mouse, teclado ou um toque longo em dispositivos touch. Ela não altera a aparência do texto — afeta apenas o comportamento de seleção.
Esta página aborda o que cada valor faz, quando você usaria user-select, os cuidados a ter e exemplos executáveis que você pode editar.
Por que usar user-select
Selecionar texto é um comportamento padrão do navegador, então na maioria das vezes você não precisa alterá-lo. Você o modifica deliberadamente em algumas situações:
- Impedir seleção acidental em controles de interface — botões, abas, itens de menu, alças de arrastar. Quando um usuário clica duas vezes ou arrasta um desses elementos, o navegador destaca o rótulo, o que parece quebrado.
user-select: noneevita isso. - Copiar com um clique para strings curtas como códigos de cupom, chaves de API ou comandos.
user-select: allseleciona o elemento inteiro com um único clique para que o usuário possa copiá-lo instantaneamente. - Restaurar a seleção quando um elemento pai a desativou, mas um filho (um endereço, um bloco de código) ainda deve ser selecionável — defina
user-select: textno filho.
O valor padrão é "auto", que é determinado da seguinte forma:
- Nos pseudo-elementos ::before e ::after, o valor calculado é "none"
- Se o elemento for um elemento editável, o valor calculado é "contain",
- Se o valor calculado de user-select no elemento pai deste elemento for "all", o valor calculado é "all".
- Se o valor calculado de user-select no elemento pai deste elemento for "none", o valor calculado é "none",
- Caso contrário, o valor calculado é "text".
Os prefixos de fornecedor (-webkit-, -moz-) estão agora obsoletos em todos os navegadores modernos. A propriedade user-select padrão é totalmente suportada sem eles.
| Valor Inicial | auto |
|---|---|
| Aplica-se a | Todos os elementos, embora alguns valores não tenham efeito em elementos não-inline. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.userSelect = "text"; |
Sintaxe
Valores CSS de user-select
user-select: auto | none | text | all | contain | initial | inherit;Exemplo da propriedade user-select com o valor "auto":
Exemplo de código CSS user-select
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: auto;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>No exemplo dado, o texto pode ser selecionado se o navegador permitir.
Exemplo da propriedade user-select com o valor "none":
Exemplo CSS user-select com prefixos
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: none;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>O texto não pode ser selecionado.
Exemplo da propriedade user-select com o valor "all":
Exemplo CSS user-select com o valor all
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: all;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>Clicar em qualquer lugar no elemento seleciona todo o texto dentro dele — prático para copiar códigos ou comandos com um único clique.
Exemplo da propriedade user-select com o valor "text":
Exemplo CSS user-select com o valor text
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
user-select: text;
}
</style>
</head>
<body>
<h2>User-select property example</h2>
<div>Lorem ipsum is simply dummy text.</div>
</body>
</html>O texto pode ser selecionado normalmente pelo usuário. Este valor é útil para reativar a seleção em um filho específico quando um ancestral definiu user-select: none.
Coisas a ter em mente
user-select: nonenão é um recurso de segurança. Ele apenas bloqueia a seleção casual com mouse/teclado — o texto ainda está no DOM e é totalmente acessível via "Ver Código-fonte", leitores de tela e cópia via teclado em muitos navegadores. Nunca o use para "proteger" conteúdo.- Não desativa a cópia programaticamente nem via clique direito → Copiar em todos os navegadores. Se você realmente precisar bloquear a cópia, deve tratar o evento
copyem JavaScript — mas pense bem se deve fazer isso. - Herdado? Não.
user-selectnão é herdado no sentido usual, mas seu valor calculado depende do elemento pai (veja as regras de "auto" acima), então definirnoneem um contêiner afeta efetivamente seus descendentes. - Combine com
pointer-eventscom cuidado. Eles resolvem problemas diferentes:user-selectcontrola o destaque de texto, enquantopointer-eventscontrola se um elemento responde ao mouse/touch.
Valores
| Valor | Descrição | Experimentar |
|---|---|---|
| auto | O texto pode ser selecionado se o navegador permitir. Este é o valor padrão desta propriedade. | Experimentar » |
| none | O texto não é selecionado. | Experimentar » |
| text | O texto é selecionado pelo usuário. | Experimentar » |
| all | O texto é selecionado com um clique. | Experimentar » |
| contain | O texto pode ser selecionado, mas a seleção não pode se estender além dos limites do elemento. Normalmente usado para elementos editáveis. | Experimentar » |
| initial | Define a propriedade para seu valor padrão. | Experimentar » |
| inherit | Herda a propriedade do seu elemento pai. |
Prática
Propriedades relacionadas
pointer-events— controla se um elemento reage a eventos de mouse e touch.cursor— altera o ponteiro do mouse exibido sobre um elemento.::beforee::after— os pseudo-elementos cujo valor calculado deuser-selecté semprenone.