Desabilitar seleção de texto com CSS

Neste artigo você vai desabilitar seleção de texto com CSS, impedindo os usuários a selecionar o conteúdo do seu site para cópia, por exemplo

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre HTML, CSS e também bloqueio de conteúdo.

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Para impedir a seleção de um texto do seu site, você pode utilizar uma regra de CSS chamada user-select

Apenas tome cuidado, pois bloquear ações que são permitidas na maioria dos sites não é uma boa prática

Usuários podem não retornar mais, por que você impediu ele de algo que pode realizar em um site concorrente

Voltando ao problema, o user-select vai levar um valor de none

Veja um exemplo prático da situação:

<p id="bloquear-selecao">Não pode ser selecionado</p>

Este é o nosso HTML, agora vamos aplicar o bloqueio de seleção neste parágrafo, veja:

#bloquear-selecao {
  user-select: none;
}

Agora, se você fizer o teste, o usuário não pode mais selecionar o texto deste parágrafo

E assim resolvemos este problema, apenas tome cuidado com a limitação de comportamento do usuário!

Conclusão

Neste artigo você aprendeu a como desabilitar seleção de texto com CSS

Utilizamos a propriedade user-select com o valor de none

Desta maneira o usuário será impedido de selecionar o elemento que possui esta regra

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube