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?

css Neil
fonte

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

5

possível duplicação da regra CSS para desativar o realce da seleção de texto

Mottie

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

Alguma Vitória
fonte

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

Rik
fonte

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;"/>

Meglio
fonte

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}

BT
fonte

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

Shahnawaz
fonte

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

Starx
fonte

0

em vez de bodydigitar uma lista de elementos que você deseja.

Eric Fortis
fonte

0

Eu concordo com o Someth Victory, você precisa adicionar uma classe específica a alguns elementos que deseja que não sejam selecionados.

Além disso, você pode adicionar essa classe em casos específicos usando javascript. Exemplo aqui Tornando o conteúdo não selecionável com a ajuda de CSS .

Starikovs
fonte

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

cristianojeda
fonte

CSS desabilita a seleção de texto

Respostas:

Demo