CSS HTML

Desabilitar seleção de texto com CSS

25 de fevereiro de 2021

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

Desabilitar seleção de texto com CSS capa

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

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

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x