CSS deaktiviert die Textauswahl

92

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 inputund textareaBoxen sind jetzt jedoch nicht mehr auswählbar. Wie kann ich nur diese Eingabeelemente auswählbar und den Rest nicht auswählbar machen?

css

— Neil
quelle

Ich kann auswählen inputund textareaElemente: jsfiddle.net/Smy26

— Sampson

Es sieht so aus, als ob das Webkit die Auswahl dieser Elemente ermöglicht, Moz jedoch nicht.

— Christian

5

Mögliches Duplikat der CSS-Regel zum Deaktivieren der Hervorhebung der

— Textauswahl

171

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. Wählen Sie:

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

— Etwas Sieg
quelle

3

Wird in Chrome, Safari nicht unterstützt .

— Knutole

5

@knutole Lies die Tabelle noch einmal. Der Wert von elementwird in Chrome / Safari nicht unterstützt.

— MForMarlon

31

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

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

Und dann aktivieren Sie es 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;
}

— Rik
quelle

1

Für eine vollständige Browserunterstützung sollten Sie Ihrem <body> - oder <div> -Element folgende Attribute hinzufügen: unselectable = "yes" onselectstart = "return false" onmousedown = "return false" / * Vorsichtig verwenden, das letzte Attribut kann die vorhandene Funktion beeinflussen * /

— Dan

11

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

— Meglio
quelle

1

In alten Versionen von Firefox muss HTML möglicherweise ein weiteres Attribut hinzugefügt werden: onmousedown = "return false"

— Dan

2

::selection,::moz-selection {color:currentColor;background:transparent}

— BT
quelle

Wie hier angegeben w3schools.com/cssref/sel_selection.asp . Dies ist bisher nicht Teil einer CSS-Spezifikation, und Firefox benötigt -moz-. Das Richtige sollte also sein: :: - Moz-Auswahl {Farbe: aktuelle Farbe; Hintergrund: transparent} :: Auswahl {Farbe: aktuelle Farbe; Hintergrund: transparent}

— Vladislav

1

@Vladislav Guter Punkt zum Moz-Präfix. Ehrlich gesagt, traue w3schools nicht. Es ist so eine schreckliche Quelle. MDN gibt die tatsächlichen Browserkompatibilitätsversionen an und stellt fest, dass :: Auswahl aus dem CSS-Entwurf entfernt wurde, ABER wieder hinzugefügt wurde: developer.mozilla.org/en-US/docs/Web/CSS/::selection . Ein weiterer Hinweis, Firefox ist bereit, die Notwendigkeit für das Präfix zu entfernen: bugzilla.mozilla.org/show_bug.cgi?id=509958

— BT

2

Sie können alle 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 und die Aktivierung des Textbereichs 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;}

— Shahnawaz
quelle

1

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

Nun jedes Element in einem div mit id div keine Auswahl mehr.

Demo

— Starx
quelle

0

bodyGeben Sie stattdessen eine Liste der gewünschten Elemente ein.

— Eric Fortis
quelle

0

Ich stimme Someth Victory zu. Sie müssen einigen Elementen, die nicht ausgewählt werden sollen, eine bestimmte Klasse hinzufügen.

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

— Starikovs
quelle

0

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

— cristianojeda
quelle