09.03.2025

Desabilitando a Seleção de Texto em HTML com CSS

Resposta Rápida

Se você precisar desabilitar a seleção de texto em seu site, use a propriedade CSS user-select: none;. Veja abaixo um exemplo de como desabilitar a seleção de texto em toda a página:

* {
  user-select: none; /* A arte de tornar a seleção impossível */
}

Suporte a Navegadores Mais Antigos

Em versões mais antigas de navegadores, como Internet Explorer ou Opera, o atributo unselectable pode ser utilizado para desabilitar a seleção. Aqui está um exemplo:

<div unselectable="on" class="no-select">
  Não toque (lembra da letra dessa música? Não? Vamos deixar assim).
</div>

var elems = document.querySelectorAll('.no-select');
Array.prototype.forEach.call(elems, function(el) {
  el.setAttribute('unselectable', 'on');
});

Evitando Seleção em Conteúdo Dinâmico

Elementos dinâmicos na página também podem ser protegidos contra seleção usando uma função recursiva.

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

// Exemplo de uso:
makeUnselectable(document.getElementById('content'));

Prevenindo Eventos de mousedown no Nível de Manipulação de Eventos

Nos casos em que o CSS não alcança o resultado desejado, o JavaScript entra em ação para evitar o arrasto de elementos:

document.addEventListener('mousedown', function(e) {
  e.preventDefault();  // Impede a seleção ou arrasto
  e.stopPropagation(); // Impede a propagação do evento
}, false);

Usar jQuery simplifica o gerenciamento desses eventos:

$(document).on('mousedown', function(e) {
  e.preventDefault();
}).on('mouseup', function() {
  $(this).off('mousedown');
});

Prefixos de Fornecedor e Estilos de Seleção Pseudo

Os prefixos de fornecedor tornaram-se práticas padrão em navegadores modernos:

.no-select {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE 10+ e Edge */
  user-select: none;         /* Formato padrão */
}

Se você anteriormente estilizou a seleção com ::selection ou ::-moz-selection, certifique-se de ajustá-los adequadamente:

.no-select::selection,
.no-select::-moz-selection {
  background: none;
}

Experiência do Usuário e Acessibilidade

Tenha em mente a importância da experiência do usuário e da acessibilidade ao desabilitar a seleção de texto. Quaisquer restrições devem ser justificadas do ponto de vista da UX.

Outras Formas de Prevenir Interação

Para proibir o arrasto de imagens sem afetar a seleção de texto, sugerimos a seguinte solução:

img {
  pointer-events: none; /* Impede o arrasto de imagens */
}

Em navegadores mais antigos, uma sobreposição transparente pode ser usada:

<img src="imagem.jpg" draggable="false">
<div class="overlay" style="position: absolute; width: larguraImagem; height: alturaImagem; top: topoImagem; left: esquerdaImagem;"></div>

Visualização

Seu site é como um museu:

Antes: 🖼️🔓 - Interação sem restrições

Após adicionar user-select: none;:

.exhibit { user-select: none; }

A página se transforma da seguinte maneira:

Depois: 🖼️🔒 - Visualização somente, sem a possibilidade de tocar

Seus textos estão protegidos como verdadeiras obras de arte. 🚫👆

Precisão do Comportamento de Seleção

Elementos Dinâmicos e Padrões de Atualização

Em conteúdos dinâmicos, atualizações de UI em tempo hábil garantirão uma interação suave:

document.addEventListener('mousemove', function(e) {
  // Lógica para atualizar a UI vai aqui
});

Camadas de Imagens com z-index

Ao trabalhar com elementos em camadas, use z-index para gerenciar a sobreposição deles:

.overlay {
  z-index: 10; /* A sobreposição deve estar acima da imagem que cobre */
}

Removendo Listeners de Eventos

Não se esqueça de remover os listeners de eventos após eles não serem mais necessários. Esse aspecto é particularmente importante ao trabalhar com aplicativos de página única e conteúdo dinâmico:

$(window).on('mouseup', function() {
  $(document).off('mousemove'); /* Remove handlers desnecessários */
});

Recursos Úteis

1. user-select - CSS: Cascading Style Sheets | MDN
2. user-select | CSS-Tricks
3. Propriedade CSS user-select | W3Schools
4. Como desabilitar a seleção de texto - Stack Overflow
5. Seleção e faixa | JavaScript.info
6. "user-select" | Can I use... Tabelas de suporte para HTML5, CSS3, etc

Video

Navigation