wake-up-neo.net

CSS deaktiviert die Textauswahl

Derzeit habe ich dies in das body-Tag eingefügt, um die Textauswahl zu deaktivieren:

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

Meine input- und textarea-Felder sind jetzt nicht auswählbar. Wie kann ich nur diese Eingabeelemente auswählbar und den Rest nicht auswählbar machen?

85
Neil

Wenden Sie diese Eigenschaften nicht auf den gesamten Körper an. Verschieben Sie sie in eine Klasse und wenden Sie diese Klasse auf die Elemente an, die Sie deaktivieren möchten.

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

Sie können auch die Benutzerauswahl für alle Elemente deaktivieren:

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

Aktivieren Sie es dann für die Elemente, die der Benutzer auswählen soll:

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

Wollte nur alles zusammenfassen:

.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

sie können die gesamte Auswahl deaktivieren

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

jetzt können Sie die Eingabe aktivieren und den Textbereich aktivieren

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

Verwenden Sie zu diesem Zweck einen Platzhalter *.

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

Jetzt hat jedes Element in einem div mit der ID div keine Auswahl.

Demo

1
Starx

Auswahl überall deaktivieren

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

Ich stimme Someth Victory zu, Sie müssen einigen Elementen, die Sie nicht auswählen möchten, eine bestimmte Klasse hinzufügen.

Sie können diese Klasse in bestimmten Fällen auch mit Javascript hinzufügen. Beispiel hier Inhalte mithilfe von CSS nicht auswählbar machen .

0
starikovs

geben Sie anstelle von body eine Liste der gewünschten Elemente ein. 

0
Eric Fortis