Como desativar o destaque da seleção de texto

Para âncoras que funcionam como botões (por exemplo, Perguntas , Tags , Usuários , etc. na parte superior da página Estouro de pilha) ou guias, existe uma maneira padrão de CSS de desativar o efeito de destaque se o usuário selecionar acidentalmente o texto?

Sei que isso pode ser feito com JavaScript, e um pouco de pesquisa no Google resultou no Mozilla-only -moz-user-select opção .

Existe uma maneira compatível com os padrões para fazer isso com CSS e, se não, qual é a abordagem de "melhores práticas"?

ATUALIZAÇÃO janeiro de 2017:

De acordo com Posso usar , o user-selectatualmente é suportado em todos os navegadores, exceto o Internet Explorer 9 e versões anteriores (mas, infelizmente, ainda precisa de um prefixo de fornecedor).

Todas as variações corretas de CSS são:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Observe que user-selectestá em processo de padronização (atualmente em um rascunho de trabalho do W3C ). Não é garantido que funcione em todos os lugares, e pode haver diferenças na implementação entre navegadores e, no futuro, os navegadores podem dispensar o suporte.

Mais informações podem ser encontradas na documentação do Mozilla Developer Network .

Na maioria dos navegadores, isso pode ser alcançado usando variações proprietárias na user-selectpropriedade CSS , originalmente propostas e depois abandonadas no CSS 3 e agora propostas no nível 4 da UI do CSS :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Para Internet Explorer <10 e Opera <15, você precisará usar o unselectableatributo do elemento que você deseja que não seja selecionado. Você pode definir isso usando um atributo em HTML:

<div id="foo" unselectable="on" class="unselectable">...</div>

Infelizmente, essa propriedade não é herdada, o que significa que você deve colocar um atributo na tag de início de cada elemento dentro do <div>. Se isso for um problema, você poderá usar o JavaScript para fazer isso recursivamente para os descendentes de um elemento:

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

makeUnselectable(document.getElementById("foo"));

Atualização 30 de abril de 2014 : Esse percurso de árvore precisa ser executado novamente sempre que um novo elemento é adicionado à árvore, mas parece que, a partir de um comentário de @Han, é possível evitar isso adicionando um mousedownmanipulador de eventos que define unselectableo destino do evento. Consulte http://jsbin.com/yagekiji/1 para obter detalhes.

Isso ainda não cobre todas as possibilidades. Embora seja impossível iniciar seleções em elementos não selecionáveis, em alguns navegadores (Internet Explorer e Firefox, por exemplo), ainda é impossível impedir seleções que iniciam antes e terminam após o elemento não selecionável sem tornar todo o documento não selecionável.

Uma solução JavaScript para o Internet Explorer é:

onselectstart="return false;"

Até que a propriedade user-select do CSS 3 fique disponível, os navegadores baseados no Gecko suportam a -moz-user-selectpropriedade que você já encontrou. Os navegadores WebKit e Blink suportam o-webkit-user-select propriedade.

Obviamente, isso não é suportado em navegadores que não usam o mecanismo de renderização Gecko.

Não existe uma maneira rápida e fácil de cumprir os "padrões"; usar JavaScript é uma opção.

A verdadeira questão é: por que você deseja que os usuários não sejam capazes de destacar e, presumivelmente, copiar e colar certos elementos? Não me deparei com uma única vez que desejava não permitir que os usuários destacassem uma determinada parte do meu site. Vários de meus amigos, depois de passar muitas horas lendo e escrevendo códigos, usarão o recurso de destaque como uma maneira de lembrar onde estavam na página ou fornecer um marcador para que seus olhos saibam onde procurar em seguida.

O único lugar em que pude ver isso útil é se você tiver botões para formulários que não devem ser copiados e colados se um usuário copiar e colar o site.

Se você deseja desativar a seleção de texto em tudo, exceto nos <p>elementos, é possível fazer isso em CSS (observe o -moz-noneque permite substituir os subelementos, o que é permitido em outros navegadores com none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

Nas soluções das respostas anteriores, a seleção é interrompida, mas o usuário ainda pensa que você pode selecionar o texto porque o cursor ainda muda. Para mantê-lo estático, você precisará definir o cursor CSS:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Isso tornará seu texto totalmente plano, como seria em um aplicativo de desktop.

Você pode fazer isso no Firefox e Safari (Chrome também?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }

Solução alternativa para o WebKit :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

Eu o encontrei em um exemplo do CardFlip.

Eu gosto da solução híbrida CSS + jQuery.

Para tornar todos os elementos internos <div class="draggable"></div>não selecionáveis, use este CSS:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

E então, se você estiver usando jQuery, adicione isso dentro de um $(document).ready()bloco:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Eu acho que você ainda deseja que quaisquer elementos de entrada sejam interativos, daí o :not()pseudo-seletor. Você poderia usar'*' se não se importa.

Advertência: o Internet Explorer 9 pode não precisar dessa parte extra do jQuery, portanto, convém adicionar uma verificação de versão.

.hidden:after {
    content: attr(data-txt);
}

<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Não é o melhor caminho, no entanto.

Você pode usar CSS ou JavaScript para isso.

A maneira JavaScript é suportada em navegadores mais antigos , como versões antigas do Internet Explorer, mas se não for o seu caso, use a maneira CSS:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

Além disso, para o Internet Explorer, você precisa adicionar a pseudo classefocus (.ClassName: focus) e outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}

Tente inserir essas linhas no CSS e chame a propriedade "disHighlight" na classe:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}

Uma atualização rápida de hackers

Se você usar o valor nonepara todas as user-selectpropriedades CSS (incluindo os prefixos do navegador), haverá um problema que ainda pode ocorrer por isso.

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

Como o CSS-Tricks diz, o problema é:

O WebKit ainda permite que o texto seja copiado, se você selecionar elementos ao seu redor.

Você também pode usar o abaixo para enforceque um elemento inteiro seja selecionado, o que significa que, se você clicar em um elemento, todo o texto envolvido nesse elemento será selecionado. Para isso, basta alterar o valor nonepara all.

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}

Para aqueles que têm problemas para conseguir o mesmo no navegador Android com o evento de toque, use:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

Se você estiver usando Menos e Bootstrap, poderá escrever:

.user-select(none);

-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}

<div id="foo" unselectable="on" class="unselectable">...</div>

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

-webkit-user-select: none;
-moz-user-select: none;

onselectstart="return false;"

::selection { 
    background: transparent; 
}

::-moz-selection { 
    background: transparent; 
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

<div class="draggable"></div>

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }

if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');

Trabalhando

CSS:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

Isso deve funcionar, mas não funcionará para os navegadores antigos. Há um problema de compatibilidade do navegador.

Com SASS (sintaxe SCSS)

Você pode fazer isso com um mixin :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

Em uma tag HTML:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

Experimente neste CodePen .

Se você estiver usando um autoprefixer, poderá remover outros prefixos.

Compatibilidade do navegador aqui .

Além da propriedade somente do Mozilla, não, não há como desativar a seleção de texto apenas com CSS padrão (a partir de agora).

Se você perceber, o Stack Overflow não desabilita a seleção de texto para os botões de navegação, e eu recomendaria não fazer isso na maioria dos casos, pois modifica o comportamento normal da seleção e o conflito com as expectativas do usuário.

Isso funciona em alguns navegadores:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

Basta adicionar os elementos / IDs desejados na frente dos seletores separados por vírgulas sem espaços, da seguinte forma:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

As outras respostas são melhores; isso provavelmente deve ser visto como último recurso / alcance.

Suponha que haja dois divs assim:

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}

<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

Defina o cursor como padrão para que ele dê uma sensação não selecionável ao usuário.

O prefixo precisa ser usado para suportá-lo em todos os navegadores. Sem um prefixo, isso pode não funcionar em todas as respostas.

Isso será útil se a seleção de cores também não for necessária:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... todas as outras correções do navegador. Ele funcionará no Internet Explorer 9 ou posterior.

Adicione isso à primeira div na qual você deseja desativar a seleção de texto:

onmousedown='return false;' 
onselectstart='return false;'

NOTA:

A resposta correta está correta, pois impede que você possa selecionar o texto. No entanto, isso não impede que você possa copiar o texto, como mostrarei nas próximas capturas de tela (a partir de 7 de novembro de 2014).

Como você pode ver, não conseguimos selecionar os números, mas conseguimos copiá-los.

Testado em: Ubuntu , Google Chrome 38.0.2125.111.

Para obter o resultado que eu precisava, descobri que precisava usar ambos ::selectioneuser-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}

Isso é feito facilmente com:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Alternativamente:

Digamos que você tenha um <h1 id="example">Hello, World!</h1>. Você terá que remover o HTML interno h1, nesse caso Olá, Mundo . Então você terá que ir para CSS e fazer o seguinte:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

Agora, ele simplesmente pensa que é um elemento de bloco, e não um texto.

Isso não é CSS, mas vale a pena mencionar:

Desativar seleção da interface do usuário do jQuery :

$("your.selector").disableSelection();

Verifique minha solução sem JavaScript:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}

<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

Menu pop-up com minha técnica aplicada: http://jsfiddle.net/y4Lac/2/

Embora esse pseudoelemento estivesse nos rascunhos do nível 3 dos seletores de CSS, ele foi removido durante a fase de recomendação do candidato, pois parecia que seu comportamento era subespecificado, especialmente com elementos aninhados, e a interoperabilidade não foi alcançada.

Está sendo discutido em Como :: seleção funciona em elementos aninhados .

Apesar de estar sendo implementado nos navegadores, você pode criar uma ilusão de que o texto não está sendo selecionado usando a mesma cor e cor de plano de fundo na seleção do design da guia (no seu caso).

Design CSS normal

p { color: white;  background: black; }

Na seleção

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Não permitir que os usuários selecionem o texto levantará problemas de usabilidade.