So deaktivieren Sie die Hervorhebung der Textauswahl

5203

Für Anker, die sich wie Schaltflächen verhalten (z. B. Fragen , Tags , Benutzer) usw. oben auf der Seite "Stapelüberlauf") oder Registerkarten verhalten, eine CSS-Standardmethode zum Deaktivieren des Hervorhebungseffekts, wenn der Benutzer versehentlich den Text auswählt?

Mir ist klar, dass dies mit JavaScript möglich ist, und ein wenig googeln ergab die -moz-user-selectOption nur für Mozilla .

Gibt es eine standardkonforme Möglichkeit, dies mit CSS zu erreichen, und wenn nicht, wie lautet der "Best Practice" -Ansatz?

Peter Mortensen
quelle
7
Können Elemente innerhalb des Elements, bei denen die Hervorhebung deaktiviert ist, die Hervorhebung in CSS im Stil- oder Klassenattribut aktiviert haben? oder mit anderen Worten, gibt es andere Werte für -webkit-user-select ect. anders als nur keine?
7
Verwandte Themen : stackoverflow.com/questions/16600479/… = wie nur einige der untergeordneten Elemente ausgewählt werden können
JK.
9
In einigen Browsern ist ein Fehler aufgetreten, bei dem "Alles auswählen" (STRG + A und CMD + A) immer noch Dinge auswählt. Dies kann mit einer transparenten Auswahlfarbe bekämpft werden: ::selection { background: transparent; } ::-moz-selection { background: transparent; }
DaAwesomeP
12
Kann ich nur sagen: Bitte tu das nicht. Aus meiner Erfahrung möchte ich häufig einen Text auswählen, der auch als Schaltfläche dient, um ihn an einer anderen Stelle zu kopieren und einzufügen . Es wäre unvorstellbar ärgerlich, dies nicht tun zu können, da einige Webentwickler alles daran gesetzt haben, diese Funktion für mich absichtlich zu deaktivieren. Bitte tun Sie dies nur, wenn Sie einen sehr, sehr guten Grund haben.
Kajacx
3
Im Jahr 2017, ist es besser zu nutzen postcssund autoprefixerund Set Browser - Version, dann postcssalles kühl machen.
AmerllicA

Antworten:

7322

UPDATE Januar 2017:

Laut Kann ich verwenden , wird das user-selectderzeit in allen Browsern außer Internet Explorer 9 und früheren Versionen unterstützt (benötigt aber leider noch ein Herstellerpräfix).


Alle korrekten CSS-Variationen sind:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>


Beachten Sie, dass user-selectsich dies im Standardisierungsprozess befindet (derzeit in einem W3C-Arbeitsentwurf ). Es ist nicht garantiert, dass es überall funktioniert, und es kann Unterschiede in der Implementierung zwischen den Browsern geben, und in Zukunft können Browser die Unterstützung dafür einstellen.


Weitere Informationen finden Sie in der Dokumentation zum Mozilla Developer Network .

Blowsie
quelle
38
netter Code molokoloco: D, obwohl ich persönlich davon Abstand nehmen würde, da manchmal die Werte für verschiedene Browser unterschiedlich sein müssen und es auf JavaScript beruht. Das Erstellen einer Klasse und das Hinzufügen zu Ihrem Element oder das Anwenden des CSS auf Ihren Elementtyp in Ihrem Stylesheet ist ziemlich kugelsicher.
Blowsie
58
'user-select'- Werte: keine | Text | umschalten | Element | Elemente | alle | erben - w3.org/TR/2000/WD-css3-userint-20000216
Blowsie
34
Tatsächlich ist -o-user-select in Opera nicht implementiert. Stattdessen wird das nicht auswählbare Attribut des IE implementiert.
Tim Down
30
Aus irgendeinem Grund funktionierte dies alleine nicht in IE8, ich fügte <div onselectstart="return false;">es dann meinem Hauptteil hinzu .
Robasta
308
das ist lächerlich! so viele verschiedene Möglichkeiten, dasselbe zu tun. Lassen Sie uns einen neuen Standard für die Benutzerauswahl erstellen. wir werden es nennen standard-user-select. dann werden wir diese Probleme nicht haben. Aus Gründen der Abwärtskompatibilität sollten wir jedoch auch die anderen einbeziehen. Jetzt wird der Code -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; standard-user-select: none;. Ah, viel besser.
Claudiu
854

In den meisten Browsern kann dies mithilfe proprietärer Variationen der CSS- user-selectEigenschaft erreicht werden, die ursprünglich in CSS 3 vorgeschlagen und dann aufgegeben und jetzt in CSS UI Level 4 vorgeschlagen wurden :

*.unselectable {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in Internet Explorer 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Für Internet Explorer <10 und Opera <15 müssen Sie das unselectableAttribut des Elements verwenden, dessen Auswahl Sie aufheben möchten. Sie können dies mithilfe eines Attributs in HTML festlegen:

<div id="foo" unselectable="on" class="unselectable">...</div>

Leider wird diese Eigenschaft nicht vererbt, was bedeutet, dass Sie ein Attribut in das Start-Tag jedes Elements innerhalb der setzen müssen <div>. Wenn dies ein Problem ist, können Sie stattdessen JavaScript verwenden, um dies rekursiv für die Nachkommen eines Elements durchzuführen:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));

Update 30. April 2014 : Diese Baumdurchquerung muss wiederholt werden, wenn ein neues Element zum Baum hinzugefügt wird. Aus einem Kommentar von @Han geht jedoch hervor, dass dies durch Hinzufügen eines mousedownEreignishandlers, der unselectabledas Ziel des Baums festlegt, vermieden werden kann Veranstaltung. Weitere Informationen finden Sie unter http://jsbin.com/yagekiji/1 .


Dies deckt immer noch nicht alle Möglichkeiten ab. Während es unmöglich ist, eine Auswahl in nicht auswählbaren Elementen zu initiieren, ist es in einigen Browsern (z. B. Internet Explorer und Firefox) immer noch unmöglich, eine Auswahl zu verhindern, die vor und nach dem nicht auswählbaren Element beginnt, ohne das gesamte Dokument auswählbar zu machen.

Tim Down
quelle
30
Sie sollten den * Selektor aus Ihrem Beispiel entfernen, er ist wirklich ineffizient und es besteht wirklich keine Notwendigkeit, ihn in Ihrem Beispiel zu verwenden.
Blowsie
66
@Blowsie: Ich glaube nicht: Die CSS 2-Spezifikation besagt, dass *.foound .foogenau gleichwertig ist (im zweiten Fall ist der universelle Selektor ( *) impliziert). Abgesehen von Browser-Macken kann ich das nicht sehen, einschließlich des *Willensschadens Performance. Es ist eine langjährige Gewohnheit von mir, das einzubeziehen *, was ich ursprünglich aus Gründen der Lesbarkeit begonnen habe: Auf einen Blick wird ausdrücklich angegeben, dass der Autor beabsichtigt, alle Elemente abzugleichen.
Tim Down
38
oooh nach einiger weiterer Lektüre scheint es * nur dann unwirksam zu sein, wenn es als Schlüssel (der oberste Selektor) verwendet wird, dh nicht auswählbar *. Weitere Infos hier code.google.com/speed/page-speed/docs/…
Blowsie
20
Anstatt die class = "unselectable" zu verwenden, verwenden Sie einfach die Attributauswahl [unselectable = "on"] {…}
Chris Calo
13
@Francisc: Nein. Wie ich bereits in den Kommentaren zu Blowsie sagte, macht es genau keinen Unterschied.
Tim Down
196

Eine JavaScript-Lösung für Internet Explorer ist:

onselectstart="return false;"
Pekka
quelle
55
Vergiss nicht ondragstart!
Mathias Bynens
9
noch eine Sache hier. Wenn Sie dies dem Text hinzufügen, können Sie keinen Text in Textbereichen oder Eingabefeldern im IE auswählen. So wie ich es für IE behoben habe. body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
TheBrain
2
Dies kann als Attribut mit jQuery - $ ("p") hinzugefügt werden. Attr ("onselectstart", "return false") Dies war die einzige zuverlässige Methode für mich in IE8
Matt
13
@Abudayah, weil sie in älteren Versionen von Internet Explorer nicht funktionieren? Das ist der springende Punkt dieser Antwort.
Pekka
?? Ich kann immer noch Text in inputElementen auswählen , auch wenn ich benutze user-select: none. Ich muss wissen, wie ich das verhindern kann
Oldboy
191

Bis die User-Select- Eigenschaft von CSS 3 verfügbar ist, unterstützen Gecko- basierte Browser die -moz-user-selectbereits gefundene Eigenschaft. WebKit- und Blink-basierte Browser unterstützen die-webkit-user-select Eigenschaft.

Dies wird natürlich in Browsern nicht unterstützt, die die Gecko-Rendering-Engine nicht verwenden.

Es gibt keine "Standards" -konforme schnelle und einfache Möglichkeit, dies zu tun. Die Verwendung von JavaScript ist eine Option.

Die eigentliche Frage ist, warum Benutzer bestimmte Elemente nicht hervorheben und vermutlich kopieren und einfügen können sollen. Ich bin kein einziges Mal auf etwas gestoßen, bei dem ich nicht zulassen wollte, dass Benutzer einen bestimmten Teil meiner Website hervorheben. Einige meiner Freunde verwenden nach vielen Stunden Lesen und Schreiben von Code die Hervorhebungsfunktion, um sich zu erinnern, wo auf der Seite sie sich befanden, oder um einen Marker bereitzustellen, damit ihre Augen wissen, wo sie als nächstes suchen müssen.

Der einzige Ort, an dem ich sehen konnte, dass dies nützlich ist, ist, wenn Sie Schaltflächen für Formulare haben, die nicht kopiert und eingefügt werden sollten, wenn ein Benutzer die Website kopiert und einfügt.

X-Istence
quelle
20
Die Knopfsache wäre genau meine Motivation.
Kriem
27
Ein weiterer Grund, warum dies erforderlich ist, ist das Klicken bei gedrückter Umschalttaste, um mehrere Zeilen in einem Raster oder einer Tabelle auszuwählen. Sie möchten den Text nicht hervorheben, sondern die Zeilen auswählen.
Gordon Tucker
7
Es gibt auch rechtliche Probleme, bei denen der Inhalt einer anderen Person legal erneut veröffentlicht wird. Eine Klausel in der Lizenz verlangt jedoch, dass Web-Publisher verhindern, dass Text leicht kopiert und eingefügt werden kann. Dies hat mich dazu gebracht, diese Frage zu finden. Ich bin mit der Anforderung nicht einverstanden, aber das Unternehmen, für das ich einen Vertrag abgeschlossen habe, ist gesetzlich verpflichtet, sie auf diese Weise umzusetzen.
Craig M
5
@CraigM Der CSS-Stil hindert eine Person nicht daran, die HTML-Quelle zu greifen und zu kopieren. Wenn Sie Ihre Inhalte schützen möchten, müssen Sie bessere Wege finden.
Agile Jedi
27
Hoch interaktive Web-App mit viel Drag & Drop ... versehentliches Hervorheben ist ein großes Usability-Problem.
Marc Hughes
138

Wenn Sie die Textauswahl für alle <p>Elemente außer für Elemente deaktivieren möchten , können Sie dies in CSS tun (achten Sie auf das, -moz-nonewas das Überschreiben in Unterelementen ermöglicht, was in anderen Browsern mit zulässig ist none):

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
Benjamin Crouzier
quelle
12
p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
Stellen
11
Seien Sie sehr vorsichtig, wenn Sie die Erwartungen an die Browser-Benutzeroberfläche für ALLEN Code mit Ausnahme eines Elements deaktivieren. Was ist zum Beispiel mit Listenelementen <li /> Text?
Jason T Featheringham
Nur ein Update ... laut MDN seit Firefox 21 -moz-noneund nonesind gleich.
Kevin Fegan
2
Hierzu können Sie Cursor: Standard und Cursor: Text hinzufügen
:)
DIE Bombe. Das heißt. DAS ENDE. ul>* { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: -moz-none; -o-user-select: none; user-select: none; }[Wählt alles in einer ungeordneten Liste aus und macht es nicht auswählbar, anstatt den gesamten Ansichtsbaum zu verwerfen.] Vielen Dank für die Lektion. Meine Schaltflächenliste sieht gut aus und reagiert korrekt auf das Tippen und Drücken auf dem Bildschirm, anstatt ein IME (Android-Zwischenablage-Widgets) zu starten.
Hypersoft Systems
125

In den Lösungen in vorherigen Antworten wird die Auswahl gestoppt, aber der Benutzer glaubt immer noch, dass Sie Text auswählen können, da sich der Cursor immer noch ändert. Um es statisch zu halten, müssen Sie Ihren CSS-Cursor setzen:

.noselect {
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Dadurch wird Ihr Text völlig flach, wie es in einer Desktop-Anwendung der Fall wäre.

ZECTBynmo
quelle
"Flat" im Gegensatz zu was?
Kojow7
@ kojow7 Im Gegensatz zu "geschichtet". Anstelle von Text, der über den anderen Elementen schwebt. Es ähnelt dem Unterschied zwischen SVG- und PNG-Bildern.
Yeti
4
War überrascht zu entdecken, dass Firefox 2019 immer noch das Herstellerpräfix benötigt. Ich habe es nur missachtet, weil ich user-select: none;dachte, der Standard würde inzwischen übernommen, aber leider nicht. Sie wundern sich, worüber die Leute im Normungsausschuss noch diskutieren könnten. "Nein, Leute ... ich denke wirklich , es sollte sein, user-select: cant;weil es beschreibender ist, weißt du?" "Wir waren darüber hinweg, Mike. Wir müssten den Apostroph weglassen, und das ist eine schlechte Form!" "Genug, alle zusammen! Wir werden nächsten Monat erneut über diese Angelegenheit beraten. Die Sitzung des Normungsausschusses wurde vertagt!"
Mentalist
109

Sie können dies in Firefox und Safari tun (Chrome auch?)

::selection { background: transparent; }
::-moz-selection { background: transparent; }
Seanmonstar
quelle
121
Ich würde dies nicht empfehlen, da das Problem dadurch nicht behoben wird. Deaktivieren der Textauswahl - sie verbirgt sie lediglich. Dies kann zu einer schlechten Benutzerfreundlichkeit führen, da ich, wenn ich den Cursor über die Seite ziehe, einen beliebigen Text auswählen kann, ohne es zu wissen. Dies kann alle Arten von seltsamen "Usability-Fehlern" verursachen.
Keithamus
1
Funktioniert nicht bei PNG-Bildern mit transparenten Bereichen: Das wird immer hellblau ausgewählt ... Irgendeine Problemumgehung?
AvL
80

Problemumgehung für WebKit :

/* Disable tap highlighting */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

Ich habe es in einem CardFlip-Beispiel gefunden.

Alex
quelle
1
Die Verwendung transparentanstelle von rgba funktioniert auch in Chrome 42 unter Android.
Clint Pachl
77

Ich mag die hybride CSS + jQuery-Lösung.

<div class="draggable"></div>Verwenden Sie dieses CSS, um alle Elemente in uns nicht auswählbar zu machen:

.draggable {
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
         -o-user-select: none;
            user-select: none;
}

.draggable input {
    -webkit-user-select: text;
     -khtml-user-select: text;
       -moz-user-select: text;
         -o-user-select: text;
            user-select: text;
 }

Wenn Sie jQuery verwenden, fügen Sie dies in einem $(document).ready()Block hinzu:

if (($.browser.msie && $.browser.version < 10) || $.browser.opera) $('.draggable').find(':not(input)').attr('unselectable', 'on');

Ich denke, Sie möchten immer noch, dass Eingabeelemente interaktiv sind, daher der :not()Pseudo-Selektor. Du könntest benutzen'*' stattdessen verwenden, wenn es Ihnen egal ist.

Vorsichtsmaßnahme: Internet Explorer 9 benötigt dieses zusätzliche jQuery-Teil möglicherweise nicht. Daher möchten Sie dort möglicherweise eine Versionsprüfung hinzufügen.

Tom Auger
quelle
5
Verwenden Sie -ms-user-select: keine; (für IE10) und Ihre jQuery "if" sollte dies sein: if (($ .browser.msie && $ .browser.version <10) || $ .browser.opera)
mhenry1384
Sei vorsichtig, Mann !!! Um es in Firefox auswählbar zu machen, müssen Sie-moz-user-select: Normal;
Nicolas Thery
7
@ mhenry1384 jQuery.browserist ab Version 1.3 veraltet und wurde in Version 1.9 entfernt - api.jquery.com/jQuery.browser
WynandB
@ Wynand Guter Punkt. Aber welche Art von "Feature-Erkennung" gibt es, um zu bestimmen, welche CSS-Eigenschaft verwendet werden soll?
Tom Auger
@ TomAuger Sie könnten jQuery.support verwenden, es ermöglicht Ihnen, nach einzelnen Funktionen zu
suchen
69

.hidden:after {
    content: attr(data-txt);
}
<p class="hidden" data-txt="Some text you don't want to be selected"></p>

Es ist jedoch nicht der beste Weg.

Ale
quelle
3
Sie können auch titleals Attribut verwenden.
Zahnbürste
6
Das ist eine sehr kreative Lösung. Vor allem, wenn das title-Attribut verwendet wird, da dies für Screenreader wahrscheinlich besser wäre.
Pseudosavant
4
Ich habe es versucht ( JSBin ) und es funktioniert nicht im IE. Leider sind ältere IEs die einzigen, user-selectdie nicht funktionieren.
Pseudosavant
1
Dies ist eine großartige Nicht-JS-Alternative, die in Chrome funktioniert! Genial!
Saricden
wunderschön! ......
Lonely
69

Sie können CSS oder JavaScript verwenden .

Der JavaScript- Weg wird in älteren Browsern unterstützt, wie auch in alten Versionen von Internet Explorer. Wenn dies jedoch nicht der Fall ist, verwenden Sie den CSS-Weg:

HTML / JavaScript:

<html onselectstart='return false;'>
  <body>
    <h1>This is the Heading!</h1>
    <p>And I'm the text, I won't be selected if you select me.</p>
  </body>
</html>

HTML / CSS:

.not-selectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<body class="not-selectable">
  <h1>This is the Heading!</h1>
  <p>And I'm the text, I won't be selected if you select me.</p>
</body>

Alireza
quelle
59

Für den Internet Explorer zusätzlich, müssen Sie hinzufügen Pseudo-Klassefocus (.className: Fokus) und outline-style: none.

.ClassName,
.ClassName:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline-style: none; /* Internet Explorer  */
}
Elad Shechter
quelle
3
Dies funktioniert im IE, solange die Auswahl für ein Element mit der classNameKlasse beginnt . Siehe diese JSBin .
Pseudosavant
57

Versuchen Sie, diese Zeilen in das CSS einzufügen, und rufen Sie das "disHighlight" in der class-Eigenschaft auf:

.disHighlight {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
    -o-user-select: none;
    -moz-user-select: none;
}
user1012506
quelle
51

Ein schnelles Hack-Update

Wenn Sie den Wert nonefür alle CSS- user-selectEigenschaften (einschließlich der Browserpräfixe) verwenden, liegt ein Problem vor, das dennoch auftreten kann.

.div {
    -webkit-user-select: none; /* Chrome all / Safari all */
    -moz-user-select: none;    /* Firefox all             */
    -ms-user-select: none;     /* Internet Explorer  10+  */
     user-select: none;        /* Likely future           */
}

Wie CSS-Tricks sagt, ist das Problem :

WebKit kann der Text weiterhin kopiert werden, wenn Sie Elemente um ihn herum auswählen.

Sie können auch die folgende verwenden enforce, um ein gesamtes Element auszuwählen. Wenn Sie also auf ein Element klicken, wird der gesamte in dieses Element eingeschlossene Text ausgewählt. Dazu müssen Sie lediglich den Wert nonein ändern all.

.force-select {
    -webkit-user-select: all;  /* Chrome 49+     */
    -moz-user-select: all;     /* Firefox 43+    */
    -ms-user-select: all;      /* No support yet */
    user-select: all;          /* Likely future  */
}
Kaz
quelle
48

Für diejenigen, die Probleme haben, dasselbe im Android-Browser mit dem Touch-Ereignis zu erreichen, verwenden Sie:

html, body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}
Beep.exe
quelle
46
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   user-select: none;
}
<div id="foo" unselectable="on" class="unselectable">...</div>
function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.unselectable = true;
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));
-webkit-user-select: none;
-moz-user-select: none;
onselectstart="return false;"
::selection { 
    background: transparent; 
}

::-moz-selection { 
    background: transparent; 
}

* {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
}

p {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}
<div class="draggable"></div>
.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.draggable input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
 }
if ($.browser.msie)
    $('.draggable').find(':not(input)').attr('unselectable', 'on');
Gaurang
quelle
46

Arbeiten

CSS:

-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-webkit-user-select: none;

Dies sollte funktionieren, funktioniert aber nicht für die alten Browser. Es liegt ein Problem mit der Browserkompatibilität vor.

suraj rawat
quelle
Die nicht vorfixierte CSS-Eigenschaft muss sich am Ende der Liste der vorangestellten Versionen der Eigenschaft befinden. Es ist eine gute richtige Praxis, eine andere ist eine schlechte Praxis, einen "neuen IE" aus Chrome / Webkit zu erstellen und zu so viel Hässlichem zu führen, wie die Unterstützung von Webkit-Präfixen in Nicht-Webkit-Browsern einzuführen. Schauen Sie, das war bereits im Jahr 2012: dev.opera.com/articles/…
FlameStorm
Und ich zitiere:This is because through our site compatibility work, we have experienced that many authors of (especially mobile) sites only use -webkit- prefixed CSS, thereby ignoring other vendor prefixes and not even including an unprefixed equivalent. This leads to a reduced user experience on Opera and Firefox, which don’t receive the same shiny effects such as transitions, gradients and the like, even if the browser supported those effects.
FlameStorm
42

Mit SASS (SCSS-Syntax)

Sie können dies mit einem Mixin tun :

// Disable selection
@mixin disable-selection {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Safari */
    -khtml-user-select: none;    /* Konqueror HTML */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently supported by Chrome and Opera */
}

// No selectable element
.no-selectable {
    @include disable-selection;
}

In einem HTML-Tag:

<div class="no-selectable">TRY TO HIGHLIGHT</div>

Probieren Sie es in diesem CodePen aus .

Wenn Sie einen Autoprefixer verwenden , können Sie andere Präfixe entfernen.

Browserkompatibilität hier .

Ale_info
quelle
36

Abgesehen von der Nur-Mozilla-Eigenschaft gibt es keine Möglichkeit, die Textauswahl nur mit Standard-CSS (ab sofort) zu deaktivieren.

Wenn Sie bemerken, deaktiviert der Stapelüberlauf die Textauswahl für die Navigationsschaltflächen nicht, und ich würde in den meisten Fällen davon abraten, da dies das normale Auswahlverhalten ändert und den Erwartungen eines Benutzers widerspricht.

hbw
quelle
Ich bin damit einverstanden, dass es das vom Benutzer erwartete Verhalten ändert, aber es wäre sinnvoll für Dinge wie die Schaltfläche "Kommentar
hinzufügen
Aber enthüllt das nicht unnötige Implementierungsdetails? Der Text einer Eingabe oder Schaltfläche kann nicht ausgewählt werden.
@anon: Die meisten Benutzer werden wahrscheinlich nicht versuchen, den Text Ihrer Schaltfläche auszuwählen. In der Praxis sollte dies also nicht wirklich wichtig sein. Außerdem müssen sie dazu außerhalb der Schaltfläche mit der Auswahl beginnen. Wenn sie in die Schaltfläche selbst klicken, wird stattdessen der Onclick-Handler aktiviert. Außerdem können Sie in bestimmten Browsern (z. B. Safari) tatsächlich den Text normaler Schaltflächen auswählen…
hbw
6
Wenn Sie eine Reihe von Kommentaren aus einem Chat-Thread auswählen und neben jedem Kommentar eine Schaltfläche für Upvote / Downvote steht, ist es hilfreich, den Text ohne die anderen Inhalte auszuwählen. Das erwartet oder will der Benutzer. Er möchte die Tastenbeschriftungen nicht bei jedem Kommentar kopieren / einfügen.
Mnebuerquo
2
Und was ist, wenn Sie zum Beispiel auf eine Schaltfläche doppelklicken, die ein div öffnet, anstatt Sie auf eine andere Seite umzuleiten? dann wird durch den Doppelklick der Text für die Schaltfläche ausgewählt!
Gigala
34

Dies funktioniert in einigen Browsern:

::selection{ background-color: transparent;}
::moz-selection{ background-color: transparent;}
::webkit-selection{ background-color: transparent;}

Fügen Sie einfach Ihre gewünschten Elemente / IDs vor den durch Kommas getrennten Selektoren ohne Leerzeichen hinzu, wie folgt:

h1::selection,h2::selection,h3::selection,p::selection{ background-color: transparent;}
h1::moz-selection,h2::moz-selection,h3::moz-selection,p::moz-selection{ background-color: transparent;}
h1::webkit-selection,h2::webkit-selection,h3::webkit-selection,p::webkit-selection{ background-color: transparent;}

Die anderen Antworten sind besser; Dies sollte wahrscheinlich als letzter Ausweg gesehen werden.

r3wt
quelle
3
Es gibt einige Dinge, die sicher bekannt sein können, aber diese Lösung funktioniert definitiv nicht in allen Browsern.
Volker E.
33

Angenommen, es gibt zwei divdavon:

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
}
<div class="first">
  This is my first div
</div>

<div class="second">
  This is my second div
</div>

Setzen Sie den Cursor auf die Standardeinstellung, damit der Benutzer ein nicht auswählbares Gefühl erhält.

Das Präfix muss verwendet werden, um es in allen Browsern zu unterstützen. Ohne Präfix funktioniert dies möglicherweise nicht in allen Antworten.

Gaurav Aggarwal
quelle
30

Dies ist nützlich, wenn auch keine Farbauswahl erforderlich ist:

::-moz-selection { background:none; color:none; }
::selection { background:none; color:none; }

... alle anderen Browser-Korrekturen. Es funktioniert in Internet Explorer 9 oder höher.

karthipan raj
quelle
1
Mach das color: inherit;vielleicht.
Yaakov Ainspan
Ja, ich liebe es. Es ist CSS Selector Level 3 nach Mozilla Docs
Bariq Dharmawan
29

Fügen Sie dies dem ersten Div hinzu, in dem Sie die Auswahl für Text deaktivieren möchten:

onmousedown='return false;' 
onselectstart='return false;'
JIT1986
quelle
28

HINWEIS:

Die richtige Antwort ist insofern richtig, als sie verhindert, dass Sie den Text auswählen können. Dies hindert Sie jedoch nicht daran, den Text zu kopieren, wie ich in den nächsten Screenshots (Stand: 7. November 2014) zeigen werde.

Bevor wir etwas ausgewählt haben

Nachdem wir ausgewählt haben

Die Nummern wurden kopiert

Wie Sie sehen, konnten wir die Nummern nicht auswählen, aber kopieren.

Getestet auf: Ubuntu , Google Chrome 38.0.2125.111.

Luke Madhanga
quelle
1
Ich hatte das gleiche Problem. Unter Mac Chrome 48.0.2564.116 und unter Mac Safari 9.0.3. Insbesondere kopiert Mac Firefox 43.0 den Charakter nicht, sondern fügt zusätzliche Endlinien dazwischen. Was ist dagegen zu tun?
NHDaly
26

Um das gewünschte Ergebnis zu erzielen, musste ich sowohl ::selectionals auch verwendenuser-select

input.no-select:focus {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input.no-select::selection {
    background: transparent;
}

input.no-select::-moz-selection {
    background: transparent;
}
SemanticZen
quelle
finalyyyyyyy eine Antwort, die funktioniert
oldboy
23

Es ist leicht zu machen mit:

-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;

Alternative:

Nehmen wir an, Sie haben eine <h1 id="example">Hello, World!</h1>. Sie müssen das innerHTML davon entfernen h1, in diesem Fall Hello, World . Dann müssen Sie zu CSS gehen und dies tun:

#example::before // You can of course use **::after** as well.
{
    content: 'Hello, World!'; // Both single-quotes and double-quotes can be used here.

    display: block; // To make sure it works fine in every browser.
}

Jetzt denkt es einfach, es sei ein Blockelement und kein Text.

codeWithMe
quelle
21

Überprüfen Sie meine Lösung ohne JavaScript:

jsFiddle

li:hover {
    background-color: silver;
}
#id1:before {
    content: "File";
}
#id2:before {
    content: "Edit";
}
#id3:before {
    content: "View";
}
<ul>
    <li><a id="id1" href="www.w1.com"></a>
    <li><a id="id2" href="www.w2.com"></a>
    <li><a id="id3" href="www.w3.com"></a>
</ul>

Popup-Menü mit meiner angewendeten Technik: http://jsfiddle.net/y4Lac/2/

Apokalypse
quelle
21

Obwohl dieses Pseudoelement in Entwürfen von CSS Selectors Level 3 enthalten war, wurde es während der Phase der Kandidatenempfehlung entfernt, da es den Anschein hatte, dass sein Verhalten insbesondere bei verschachtelten Elementen unterbestimmt war und keine Interoperabilität erreicht wurde.

Es wird in How :: selection für verschachtelte Elemente erläutert .

Obwohl es in Browsern implementiert ist, können Sie sich vorstellen, dass Text nicht ausgewählt wird, indem Sie bei der Auswahl dieselbe Farbe und Hintergrundfarbe wie beim Tab-Design verwenden (in Ihrem Fall).

Normales CSS-Design

p { color: white;  background: black; }

Bei Auswahl

p::-moz-selection { color: white;  background: black; }
p::selection      { color: white;  background: black; }

Wenn Benutzer den Text nicht auswählen können, treten Probleme mit der Benutzerfreundlichkeit auf.

Suraj Naik
quelle
Dies muss der Grund sein, warum die automatische Vervollständigung von Netbeans keine Ahnung hat, wovon ich spreche!
Halfer