Como desativar o destaque da seleção de texto


5204

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"?


7
os elementos do elemento que o destaque está desativado estão desativados, com o destaque ativado em css no atributo style ou class? ou, em outras palavras, existem outros valores para -webkit-user-select ect. diferente de apenas nenhum?

7
Relacionado: stackoverflow.com/questions/16600479/… = como permitir que apenas alguns dos elementos filhos sejam selecionados
JK.

9
Em alguns navegadores, existe um erro em que "Selecionar tudo" (CTRL + A e CMD + A) ainda seleciona as coisas. Isso pode ser combatido com uma cor de seleção transparente: ::selection { background: transparent; } ::-moz-selection { background: transparent; }
DaAwesomeP:

12
Posso apenas dizer: por favor, não faça isso. De acordo com minha experiência, na maioria das vezes, desejo selecionar um texto que também serve como botão para copiá-lo e colar em outro lugar. Seria inimaginavelmente irritante não poder fazer isso porque algum desenvolvedor da Web se esforçou para desabilitar puramente esse recurso para mim. Então, por favor, não faça isso a menos que você tenha um motivo muito, muito bom.
precisa saber é

3
No ano de 2017, é a melhor maneira de usar postcsse autoprefixere conjunto versão do navegador, em seguida, postcssfazer tudo legal.
AmerllicA

Respostas:


7324

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 .


38
bom código molokoloco: D, embora eu pessoalmente ficasse bem longe de usá-lo, pois às vezes você pode precisar de valores diferentes para diferentes navegadores, e ele depende do JavaScript. Criar uma classe e adicioná-la ao seu elemento ou aplicar o css ao seu tipo de elemento na sua folha de estilos é bastante à prova de balas.
Blowsie

58
'user-select' - Valores: nenhum | texto alternar | elemento elementos | tudo | herdar - w3.org/TR/2000/WD-css3-userint-20000216
Blowsie

34
Na verdade -o-user-select não está implementado no Opera. Ele implementa o atributo não selecionável do IE.
Tim Baixo

30
Por alguma razão, isso por si só não estava funcionando no IE8, adicionei <div onselectstart="return false;">à minha div principal.
robasta

308
isto é ridículo! tantas maneiras diferentes de fazer a mesma coisa. vamos criar um novo padrão para a seleção de usuários. nós vamos chamá-lo standard-user-select. então não teremos esses problemas. embora para compatibilidade com versões anteriores também devamos incluir os outros. então agora o código se torna -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. ah, muito melhor.
Claudiu

854

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.


30
você deve remover o seletor * do seu exemplo, é realmente ineficiente e realmente não há necessidade de usá-lo no seu exemplo.
Blowsie

66
@ Blowsie: Acho que não: a especificação do CSS 2 afirma que *.fooe .foosão precisamente equivalentes (no segundo caso, o seletor universal ( *) está implícito), impedindo as peculiaridades do navegador, não vejo como *isso prejudique desempenho. É um hábito de longa data meu incluir o *que eu originalmente comecei a fazer para facilitar a leitura: ele declara explicitamente que o autor pretende combinar todos os elementos.
Tim baixo

38
oooh, após algumas leituras adicionais, parece que * não é eficiente ao usá-lo como chave (o seletor mais à direita), isto é, não selecionável *. Mais informações aqui code.google.com/speed/page-speed/docs/…
Blowsie 14/01

20
Em vez de usar class = "unselectable", basta usar o seletor de atributos [unselectable = "on"] {…} #
Chris Calo

13
@Francisc: Não. Como eu disse a Blowsie anteriormente nos comentários, não faz exatamente nenhuma diferença.
Tim Baixo

196

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

onselectstart="return false;"

55
Não esqueça ondragstart!
Mathias Bynens

9
mais uma coisa aqui. Se você adicionar isso ao corpo, não poderá selecionar texto dentro de áreas de texto ou campos de entrada no IE. A maneira como eu o corrigi para o IE. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
TheBrain

2
Isso pode ser adicionado como um atributo usando jQuery - $ ("p"). Attr ("onselectstart", "return false") Esse foi o único método confiável para mim no IE8
Matt

13
@ Abudayah porque eles não funcionam em versões mais antigas do Internet Explorer? Esse é o ponto inteiro desta resposta.
Pekka

?? Ainda posso sempre selecionar texto em inputelementos, mesmo que eu use user-select: none. eu preciso saber como evitar isso
Oldboy

191

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.


20
A coisa dos botões seria exatamente a minha motivação.
Kriem 5/05

27
Outro motivo para isso é necessário clicar com a tecla Shift pressionada para selecionar várias linhas em uma grade ou tabela. Você não deseja destacar o texto, deseja que ele selecione as linhas.
Gordon Tucker

7
Há também questões legais em que o conteúdo de outra pessoa está sendo republicado legalmente, mas uma cláusula da licença exige que os editores da Web impeçam que o texto seja facilmente copiado e colado. Foi isso que me levou a encontrar essa pergunta. Não concordo com o requisito, mas a empresa pela qual estou contratando é legalmente obrigada a implementá-lo dessa maneira.
Craig M

5
@CraigM O estilo css não impede que uma pessoa pegue a fonte HTML e a copie. Se você deseja proteger seu conteúdo, precisará encontrar maneiras melhores.
Agile Jedi

27
Aplicativo da web altamente interativo com muito arrastar e soltar ... o realce acidental é um grande problema de usabilidade.
Marc Hughes

138

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;
}

12
Certifique-se também fazer campos de entrada selecionáveis: p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
joshuadelange

11
Seja cauteloso ao desativar as expectativas da interface do usuário do navegador em TODOS os códigos, exceto em um item. E os itens da lista <li /> text, por exemplo?
Jason T Featheringham

Apenas uma atualização ... de acordo com o MDN desde o Firefox 21 -moz-nonee nonesão os mesmos.
precisa

2
Para isso, você pode adicionar cursor: padrão e cursor: texto, respectivamente
:)

A bomba. Isso é para dizer. O FIM. ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }[seleciona tudo em uma lista não ordenada e a torna não selecionável, em vez de destruir toda a árvore da visualização.] Obrigado pela lição. Minha lista de botões está ótima e está respondendo corretamente à tela tocando e pressionando, em vez de iniciar um IME (widgets da área de transferência do Android).
Hypersoft Systems

125

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.


"Plano" em oposição a quê?
precisa saber é o seguinte

@ kojow7 Ao contrário de "em camadas". Em vez de texto flutuando sobre os outros elementos. É semelhante à diferença entre imagens SVG e PNG.
Yeti

4
Fiquei surpreso ao descobrir que o Firefox ainda requer o prefixo do fornecedor em 2019. Usei apenas desconsideradamente user-select: none;, pensando que o padrão seria adotado até agora, mas, infelizmente, não. Faz você se perguntar o que as pessoas no comitê de padrões ainda poderiam estar debatendo. "Não, pessoal ... eu realmente acho que deveria ser user-select: cant;porque é mais descritivo, sabe?" "Já falamos sobre isso, Mike. Teríamos que omitir o apóstrofo, e isso é péssimo!" "Chega, pessoal! Vamos deliberar sobre esse assunto novamente no próximo mês. A reunião do Comitê de Padrões foi encerrada!"
Mentalist

109

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

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

121
Eu não recomendaria fazer isso, porque na verdade não corrige o problema; desativando a seleção de texto - ele apenas a oculta. Isso pode levar a uma má usabilidade, porque se eu arrastar o cursor pela página, poderia selecionar qualquer texto arbitrário sem saber. Isso pode causar todos os tipos de "bugs" estranhos na usabilidade.
Keithamus 02/02

1
Não funciona em imagens PNG com áreas transparentes: elas sempre serão selecionadas em azul claro ... Alguma solução alternativa?
AVL

80

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.


1
Usar transparentno lugar de rgba também funciona no Chrome 42 no Android.
Clint Pachl

77

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.


5
Use -ms-user-select: nenhum; (para IE10) e seu jQuery "se" deve ser esta: if (($ .browser.msie && $ .browser.version <10) || $ .browser.opera)
mhenry1384

Cuidado cara !!! Para torná-lo selecionável no Firefox, você deve usar-moz-user-select: Normal;
Nicolas Thery

7
@ mhenry1384 jQuery.browserfoi descontinuado a partir da versão 1.3 e foi removido na versão 1.9 - api.jquery.com/jQuery.browser
WynandB 14/13

@Wynand Bom ponto. Mas que tipo de "detecção de recurso" existe para determinar qual propriedade CSS usar?
precisa

@TomAuger Você poderia usar jQuery.support, ele permite que você verifique se há características únicas: Ligação
Aequanox

69

.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.


3
Você também pode usar titlecomo atributo.
Escova de dentes

6
Essa é uma solução muito criativa. Especialmente se ele usasse o atributo title, porque provavelmente seria melhor para os leitores de tela.
pseudosavant

4
Eu tentei ( JSBin ) e não funciona no IE. Infelizmente, os IEs mais antigos são os únicos que user-selectnão funcionam.
pseudosavant

1
Essa é uma ótima alternativa não-JS que funciona no Chrome! Impressionante!
saricden

lindo! ......
Solitário

69

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>


59

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  */
}

3
Isso funciona no IE, desde que a seleção comece em um elemento com a classNameclasse. Veja este JSBin .
Pseudosavant

57

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;
}

51

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  */
}

48

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;
}


46
-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');

46

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.


A propriedade CSS não prefixada deve estar estritamente no final da lista de versões prefixadas da propriedade. É uma boa prática correta, outra é a prática incorreta de criar um "novo IE" do Chrome / Webkit e gerar tantas coisas feias quanto a introdução do suporte ao prefixo -webkit em navegadores que não são webkit. Olha, isso já foi em 2012: dev.opera.com/articles/…
FlameStorm

E cito:This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.
FlameStorm

42

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 .


36

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.


Embora concorde que ele muda o comportamento espera do usuário, não faria sentido para coisas como o botão "Adicionar comentário" que está sentado ao lado deste campo de formulário ...
X-istência

Mas isso não expõe detalhes de implementação desnecessários? O texto de uma entrada ou botão não pode ser selecionado.

@anon: A maioria dos usuários provavelmente não tentará selecionar o texto do seu botão; portanto, na prática, isso realmente não deve importar muito. Além disso, para fazer isso, eles terão que começar a selecionar fora do botão - se clicarem no próprio botão, o manipulador onclick será ativado. Além disso, alguns navegadores (por exemplo, Safari) realmente permitir que você selecione o texto de botões normais ...
HBW

6
Se você estiver selecionando um conjunto de comentários em um tópico de bate-papo e cada comentário tiver um botão de votação positivo / negativo próximo a ele, seria bom selecionar o texto sem os outros itens. É isso que o usuário espera ou deseja. Ele não deseja copiar / colar os rótulos dos botões a cada comentário.
Mnebuerquo

2
E se você, por exemplo, clicar duas vezes em um botão que, em vez de redirecioná-lo para outra página, abrir uma div? o texto do botão será selecionado devido ao clique duplo!
Gigala

34

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.


3
Há poucas coisas que podem ser conhecidas com certeza, mas essa solução definitivamente não funciona em todos os navegadores.
Volker E.

33

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.


30

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.


1
Faça isso color: inherit;talvez.
Yaakov Ainspan

Sim, eu amo isso. É css nível selector 3 de acordo com docs Mozilla
Bariq Dharmawan

29

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

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

28

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).

Antes de selecionarmos qualquer coisa

Depois de selecionarmos

Os números foram copiados

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

Testado em: Ubuntu , Google Chrome 38.0.2125.111.


1
Eu tive o mesmo problema. No Mac Chrome 48.0.2564.116 e no Mac Safari 9.0.3. Notavelmente, o Mac Firefox 43.0 não copia o personagem, mas coloca linhas finais extras entre eles. O que deve ser feito sobre isso?
NHDaly

26

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;
}

finalyyyyyyy uma resposta que funciona
Oldboy

23

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.



21

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/


21

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.


É por isso que o preenchimento automático do Netbeans não faz ideia do que estou falando!
halfer
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.