web-dev-qa-db-fra.com

CSS désactiver la sélection de texte

Actuellement, j'ai mis ceci 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, mes cases input et textarea sont maintenant indélébiles. Comment puis-je uniquement rendre ces éléments d'entrée sélectionnables et le reste non sélectionnables?

csscss3
85
Neil

Ne pas appliquer ces propriétés à tout le corps. Déplacez-les dans une classe et appliquez cette classe aux é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;
}
152
Someth Victory

Vous pouvez également désactiver la sélection de l'utilisateur sur tous les éléments:

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

Et que l'activer sur les éléments que vous 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;
}
28
Rik

Je voulais juste tout résumer:

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

vous pouvez désactiver toute sélection

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

vous pouvez maintenant activer la saisie et activer la zone de texte

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;}
2
Shahnawaz
::selection,::moz-selection {color:currentColor;background:transparent}
2
B T

Utilisez un sélecteur Joker * à cette fin.

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

Désormais, chaque élément d'une div portant id div n'aura aucune sélection.

Démo

1
Starx

Désactiver la sélection partout

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

Je suis d'accord avec Someth Victory, vous devez ajouter une classe spécifique à certains éléments que vous souhaitez indéfinissables.

En outre, vous pouvez ajouter cette classe dans des cas spécifiques en utilisant javascript. Exemple ici Rendre le contenu non sélectionnable avec l'aide de CSS .

0
starikovs

au lieu de body, tapez la liste des éléments souhaités. 

0
Eric Fortis