CSS désactiver la sélection de texte

Question

Actuellement, j'ai mis cela dans la balise body pour désactiver les sélections de texte:

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

Cependant, mon input et textarea boîtes sont maintenant impossibles à sélectionner. Comment puis-je faire de ces éléments d'entrée sélectionnable et le reste ne peut pas être sélectionnée?

Answer 1

Ne pas appliquer ces propriétés à l'ensemble du corps. Les déplacer d'une classe et d'appliquer cette classe, pour les éléments que vous souhaitez désactiver, sélectionnez:

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

Answer 2

Vous pouvez également désactiver l'utilisateur de sélectionner tous les éléments:

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

Et de l'activer sur les éléments que vous ne voulez que l'utilisateur puisse sélectionner:

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

Answer 3

Voulais juste pour résumer le tout:

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

Answer 4

Utiliser un joker sélecteur * pour ce but.

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

Maintenant, chaque élément à l'intérieur d'un div avec l'id div aura pas de sélection.

Démo

Answer 5

au lieu de body type d'une liste d'éléments que vous le souhaitez.