Propriedade User Select
Última atualização: 2026-09-13
user-select Propriedade User Select
A propriedade user-select controla se os usuários podem selecionar texto com o mouse. Quando definida como none, o texto dentro do elemento não pode ser selecionado — comumente usada em botões, rótulos e ícones onde a cópia é desnecessária, evitando a seleção acidental de conteúdo não relacionado.
| Categoria | |
|---|---|
| Valor Inicial | auto |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS3 |
| Status | Padrão |
📝 Sintaxe
user-select: auto | none | text | all;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
auto | none | text | all | Palavra-chave | O comportamento de seleção de texto do usuário |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| user-select | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Suportado em todos os principais navegadores | |||||
Dica： A propriedade user-select não é uma propriedade padrão de CSS, mas o suporte dos navegadores é amplo; para compatibilidade, use também o prefixo -webkit-user-select.
Aviso： Não defina user-select: none onde os usuários precisam copiar conteúdo (blocos de código, texto citado) — isso prejudicaria a usabilidade.
❓ Perguntas Frequentes
QPara que serve o valor user-select: all ao copiar texto?
Aall permite que um único clique ou a primeira seleção escolha todo o texto dentro do elemento sem arrastar. É ideal para códigos de convite, chaves de API, números de pedido e trechos de código — qualquer coisa que exija selecionar tudo com um clique para copiar, e acelera visivelmente a cópia. Observe que substitui text/none nos filhos: todo o bloco atua como uma única unidade de seleção.
Quser-select: none pode impedir os usuários de copiar o conteúdo da página?
ANão. É um limite puramente apresentacional: o texto não pode ser selecionado arrastando, mas o conteúdo ainda existe no DOM, e os usuários podem recuperá-lo por meio da exibição do código-fonte, das ferramentas de desenvolvedor ou até desativando o CSS. A proteção real do conteúdo deve depender do controle de permissões no backend. user-select: none apenas melhora a experiência da interface (evitando seleção acidental); não é uma medida de segurança.
QQual é a diferença entre user-select e o pseudo-elemento ::selection?
Auser-select controla se o texto pode ser selecionado ou não; ::selection controla a aparência do texto selecionado — cor de fundo, cor do texto e assim por diante. Os dois se complementam: user-select: text permite a seleção, e ::selection estiliza o estado selecionado. Combine-os para criar efeitos de seleção com a marca.
QPor que preciso do prefixo -webkit-user-select para user-select?
AA propriedade user-select foi experimental por muito tempo. Os navegadores modernos aceitam a forma sem prefixo, mas o Safari e versões antigas do Chrome/Edge exigiam -webkit-user-select. Para compatibilidade com engines mais antigos, é comum escrever as três linhas: -webkit-user-select, -moz-user-select e a propriedade sem prefixo.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
