CSS désactiver la sélection de texte

93

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 boîtes inputet ne textareasont plus sélectionnables. Comment puis-je uniquement rendre ces éléments d'entrée sélectionnables et le reste non sélectionnable?

css Neil
la source
Je suis capable de sélectionner inputet des textareaéléments: jsfiddle.net/Smy26
Sampson
On dirait que webkit permet la sélection sur ces éléments, mais pas moz.
Christian
5
duplication possible de la règle CSS pour désactiver la mise en évidence de la sélection de texte
Mottie

Réponses:

172

N'appliquez pas ces propriétés à tout le corps. Déplacez-les vers 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;
}
Quelque chose de victoire
la source
3
Non pris en charge dans Chrome, Safari.
knutole
5
@knutole Relisez le tableau. La valeur de elementn'est pas prise en charge dans Chrome / Safari.
MForMarlon
31

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 puis 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;
}
Rik
la source
1
Pour une prise en charge complète du navigateur, vous devez ajouter les attributs suivants à votre élément <body> ou <div>: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * à utiliser avec précaution, le dernier attribut peut AFFECTER LA FONCTIONNALITÉ EXISTANTE * /
Dan
11

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;"/>
Meglio
la source
1
Les anciennes versions de Firefox pourraient nécessiter l'ajout d'un attribut supplémentaire au HTML: onmousedown = "return false"
Dan
2 
::selection,::moz-selection {color:currentColor;background:transparent}
BT
la source
Comme indiqué ici w3schools.com/cssref/sel_selection.asp . Cela ne fait partie d'aucune spécification CSS jusqu'à présent, et Firefox requiert -moz-. Donc, le bon devrait être: :: - moz-selection {color: currentColor; background: transparent} :: selection {color: currentColor; background: transparent}
Vladislav
1
@Vladislav Bon point sur le préfixe moz. Honnêtement, ne faites pas confiance à w3schools. C'est une source si terrible. MDN donne les versions réelles de compatibilité du navigateur et note que :: selection a été supprimée du brouillon CSS, MAIS a été rajoutée: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Une autre note, Firefox est prêt à supprimer le besoin du préfixe: bugzilla.mozilla.org/show_bug.cgi?id=509958
BT
2

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 l'activation de 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;}
Shahnawaz
la source
1

Utilisez un sélecteur générique * de caractères à cet effet.

#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 id div n'aura pas de sélection.

Démo

Starx
la source
0

au lieu de bodytaper une liste d'éléments que vous voulez.

Eric Fortis
la source
0

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

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

starikovs
la source
0

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">
Cristianojeda
la source