CSS desabilita a seleção de texto


92

Atualmente, coloquei isso na tag body para desativar as seleções de texto:

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

No entanto, minhas caixas inpute textareaagora não podem ser selecionadas. Como posso apenas tornar esses elementos de entrada selecionáveis ​​e o restante não selecionável?


Posso selecionar os elementos inpute textarea: jsfiddle.net/Smy26
Sampson

Parece que o webkit permite a seleção desses elementos, mas o moz não.
Christian

Respostas:


171

Não aplique essas propriedades a todo o corpo. Mova-os para uma classe e aplique essa classe aos elementos que deseja desativar, selecione:

.disable-select {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

3
Não compatível com Chrome, Safari.
Knutole

5
@knutole Leia a tabela novamente. O valor de elementnão é compatível com Chrome / Safari.
MForMarlon

31

Você também pode desativar a seleção do usuário em todos os elementos:

* {
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

E então habilite-o nos elementos que você deseja que o usuário possa selecionar:

input, textarea /*.contenteditable?*/ {
    -webkit-touch-callout:default;
    -webkit-user-select:text;
    -moz-user-select:text;
    -ms-user-select:text;
    user-select:text;
}

1
Para suporte total do navegador, você deve adicionar os seguintes atributos ao seu elemento <body> ou <div>: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * use com cuidado, o último atributo pode AFETAR A FUNCIONALIDADE EXISTENTE * /
Dan

11

Só queria resumir tudo:

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

<div class="unselectable" unselectable="yes" onselectstart="return false;"/>

1
Versões antigas do Firefox podem exigir a adição de mais um atributo ao HTML: onmousedown = "return false"
Dan

2
::selection,::moz-selection {color:currentColor;background:transparent}

Conforme declarado aqui w3schools.com/cssref/sel_selection.asp . Isso não faz parte de nenhuma especificação CSS até agora, e o Firefox requer -moz-. Portanto, o correto deve ser: :: - moz-selection {color: currentColor; background: transparent} :: selection {color: currentColor; background: transparent}
Vladislav

1
@Vladislav Bom argumento sobre o prefixo moz. Honestamente, não confie no w3schools. É uma fonte terrível. O MDN fornece as versões reais de compatibilidade do navegador e observa que :: selection foi removido do rascunho CSS, MAS foi adicionado de volta: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Outra observação, o firefox está pronto para remover a necessidade do prefixo: bugzilla.mozilla.org/show_bug.cgi?id=509958
BT

2

você pode desabilitar todas as seleções

.disable-all{-webkit-touch-callout: none;  -webkit-user-select: none;-khtml-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}

agora você pode habilitar a entrada e habilitar a área de texto

input, textarea{
-webkit-touch-callout:default;
-webkit-user-select:text;
-khtml-user-select: text;
-moz-user-select:text;
-ms-user-select:text;
user-select:text;}

1

Use um seletor curinga *para essa finalidade.

#div * { /* Narrowing, to specific elements, like  input, textarea is PREFFERED */
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

Agora, cada elemento dentro de um div com id divnão terá seleção.

Demo




0

Desativar seleção em todos os lugares

input, textarea ,*[contenteditable=true] {
  -webkit-touch-callout:default;
  -webkit-user-select:text;
  -moz-user-select:text;
  -ms-user-select:text;
  user-select:text;
   }

IE7

 <BODY oncontextmenu="return false" onselectstart="return false" ondragstart="return false">
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.