So deaktivieren Sie die Hervorhebung der Textauswahl

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?

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 .

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.

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

onselectstart="return false;"

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.

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

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.

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

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

Problemumgehung für WebKit :

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

Ich habe es in einem CardFlip-Beispiel gefunden.

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.

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

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>

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  */
}

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

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  */
}

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

Wenn Sie Less und Bootstrap verwenden, können Sie schreiben:

.user-select(none);

-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');

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.

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 .

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.

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.

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.

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.

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

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.

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

Getestet auf: Ubuntu , Google Chrome 38.0.2125.111.

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

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.

Dies ist kein CSS, aber es ist eine Erwähnung wert:

jQuery UI Auswahl deaktivieren :

$("your.selector").disableSelection();

Ü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/

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.