So deaktivieren Sie die Markierung der Textauswahl

UPDATE Januar 2017:

Gemäß kann ich verwenden, wird user-select derzeit in allen Browsern außer Internet Explorer 9 und früheren Versionen unterstützt (leider benötigt 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; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Beachten Sie, dass es sich um ein Nicht-Standard-Feature handelt (d. H. Nicht Teil einer Spezifikation). Es kann nicht garantiert werden, dass es überall funktioniert, und es kann Unterschiede bei der Implementierung zwischen Browsern geben. In der Zukunft können Browser die Unterstützung dafür einstellen.

Weitere Informationen finden Sie in Dokumentation des Mozilla Developer Network .

In den meisten Browsern kann dies durch proprietäre Variationen der CSS-Eigenschaft user-select erreicht werden. ursprünglich vorgeschlagen und dann in CSS3 aufgegeben und jetzt in CSS UI Level 4 vorgeschlagen:

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

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

Für IE <10 und Opera <15 müssen Sie das unselectable-Attribut des Elements verwenden, das nicht auswählbar sein soll. Sie können dies mit einem Attribut in HTML einstellen:

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

Leider wird diese Eigenschaft nicht vererbt, dh Sie müssen ein Attribut in das Start-Tag jedes Elements im <div> einfügen. 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 immer dann erneut ausgeführt werden, wenn ein neues Element zur Baumstruktur hinzugefügt wird. Es scheint jedoch, dass dies durch einen Kommentar von @Han vermieden werden kann, indem Hinzufügen von a mousedown Ereignishandler, der unselectable auf das Ziel des Ereignisses festlegt. Weitere Informationen finden Sie unter http://jsbin.com/yagekiji/1 .

Dies deckt noch nicht alle Möglichkeiten ab. Es ist zwar nicht möglich, Auswahlen in nicht auswählbaren Elementen zu initiieren, in einigen Browsern (z. B. IE und Firefox) ist es jedoch immer noch nicht möglich, Auswahlen zu verhindern, die vor dem nicht auswählbaren Element beginnen und enden, ohne dass das gesamte Dokument nicht ausgewählt werden kann.

Eine JavaScript-Lösung für IE ist

onselectstart="return false;"

Bis die user-select property von CSS 3 verfügbar ist, unterstützen Gecko - basierte Browser die -moz-user-select-Eigenschaft, die Sie bereits gefunden haben. WebKit und Blink-basierte Browser unterstützen die -webkit-user-select-Eigenschaft.

Dies wird natürlich nicht in Browsern 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 die Benutzer bestimmte Elemente nicht markieren und vermutlich kopieren und einfügen sollten. Es ist mir nicht ein einziges Mal aufgefallen, dass ich nicht zulassen möchte, dass Nutzer einen bestimmten Teil meiner Website hervorheben. Nach einigen Stunden Lesen und Schreiben von Code verwenden mehrere meiner Freunde die Hervorhebungsfunktion, um sich zu merken, wo sie sich auf der Seite befunden haben, oder eine Markierung, damit ihre Augen wissen, wo sie als nächstes suchen müssen.

Der einzige Ort, an dem ich feststellen könnte, 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 eingefügt hat.

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

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

Bei den obigen Lösungen ist die Auswahl gestoppt, der Benutzer glaubt jedoch weiterhin, dass Sie Text auswählen können, da sich der Cursor 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 wie in einer Desktopanwendung total flach.

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

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

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

.draggable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-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; 
 }

Und wenn Sie jQuery verwenden, fügen Sie Folgendes in einen $(document).ready()-Block ein:

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. Sie können stattdessen '*' verwenden, wenn Sie sich nicht darum kümmern.

Vorsichtsmaßnahme: IE9 benötigt dieses zusätzliche jQuery-Teil möglicherweise nicht. Sie können dort also einen Versions-Check 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önnenCSSoder JavaScript verwenden. Dafür wird JavaScript way auch in älteren Browsern wie Old IEs unterstützt. Wenn dies nicht der Fall ist, verwenden Sie die CSS-Methode:

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 Internet Explorer müssen Sie außerdem Pseudoklasse focus (.ClassName: focus) und Gliederungsstil: keine hinzufügen.

.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;/*IE*/
}

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;

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

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

Für diejenigen, die Probleme haben, im Android-Browser mit dem Touch-Ereignis dasselbe 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önnten Sie schreiben:

.user-select(none);

Fügen Sie diese Zeilen in CSS ein und rufen Sie die "disHighlight" -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;
}

Abgesehen von der Mozilla-only-Eigenschaft, nein, gibt es keine Möglichkeit, die Textauswahl nur mit Standard-CSS (jetzt) ​​zu deaktivieren.

Beachten Sie, dass Stack Overflow die Textauswahl für die Navigationsschaltflächen nicht deaktiviert. In den meisten Fällen würde ich davon abraten, da dies das normale Auswahlverhalten ändert und einen Konflikt mit den Erwartungen des Benutzers verursacht.

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 ein, wie zB:

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/Catchall gesehen werden.

Angenommen, es gibt zwei div wie folgt

.second {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/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 "Standard", damit der Benutzer ein nicht auswählbares Gefühl erhält.

Präfix muss verwendet werden, um es in allen Browsern ohne Präfix zu unterstützen. Dies funktioniert 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-Fixes. Es funktioniert in Internet Explorer 9 oder später.

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 richtig, da Sie den Text nicht auswählen können. Es hindert Sie jedoch nicht daran, den Text kopieren zu können, wie ich mit den nächsten Screenshots (ab 7. November 2014) zeigen werde.

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

Getestet am: Ubuntu , Google Chrome 38.0.2125.111.

Um das Ergebnis zu erhalten, das ich brauchte, musste ich beide::selectionunduser-selectverwenden.

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

Dies ist kein CSS, aber es ist erwähnenswert:

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 angewandten 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 schien, dass sein Verhalten, insbesondere bei verschachtelten Elementen, unterbewertet war und Interoperabilität nicht erreicht wurde.

Es wird in diskutiert. How :: selection funktioniert bei verschachtelten Elementen.

Obwohl es im Browser implementiert wird, können Sie eine Illusion erzeugen, dass Text nicht ausgewählt wird, indem Sie bei der Auswahl dieselbe Farbe und Hintergrundfarbe wie beim Tab-Design (in Ihrem Fall) verwenden.

Normales CSS-Design

p { color: white;  background: black; }

Bei Auswahl

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

Wenn Sie den Benutzern die Auswahl des Textes nicht erlauben, entstehen Probleme mit der Benutzerfreundlichkeit.

Quick-Hack-Update: März 2017 -von CSS-Tricks

Wenn Sie für alle CSS-Benutzerauswahlattribute den Wert "none" eingeben (siehe unten), liegt ein Problem vor, das dadurch immer noch auftreten kann.

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

Wie CSS-Trick sagt das Problem ist

• Mit WebKit kann der Text trotzdem kopiert werden, wenn Sie die Elemente auswählen um es herum.

Sie können stattdessen auch die unten stehende verwenden, um zu erzwingen, dass ein gesamtes Element ausgewählt wird, das die Lösung für das Problem darstellt. Sie müssen lediglich den Wert "none" in "all" ändern, der so aussehen würde

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

Ich habe von CSS-Tricks Website gelernt.

user-select: none;

Und das auch:

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

Leicht gemacht 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 einen <h1 id="example">Hello, World!</h1>. Was Sie tun müssen, ist das Entfernen der innerHTML von h1: in diesem Fall Hello, World . Dann müssen Sie zu css gehen und folgendes tun:

#example::before //You can ofc 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 er einfach, es sei ein Blockelement und kein Text.

Versuchen Sie es mit diesem:

::selection {
    background: transparent;
}

Und wenn Sie angeben möchten, dass sich kein Element innerhalb eines bestimmten Elements befindet, fügen Sie einfach die Elementklasse oder -ID vor die Auswahlregel ein, beispielsweise:

.ClassNAME::selection {
    background: transparent;
}
#IdNAME::selection {
    background: transparent;
}

Dieser Hervorhebungseffekt ist auf die Aktion mit der Bezeichnung hover (onMouseHover) ..__ zurückzuführen. Wenn Sie auf einer Registerkarte die Maus bewegen, ändert sich deren Farbe.

<div class="menu">
 <ul class="effect">
   <li>Questions </li>
   <li>JOBS </li>
   <li>Users</li>
 </ul>
</div>

<!-- CSS CODE -->

.effect:hover{
   color: none;
}

Sie können jede Farbe angeben, wenn Sie sie hervorheben möchten. Andernfalls können Sie keine Farbe angeben.

Sie können die Eigenschaft "User-select" wie folgt verwenden.

p {  
     -webkit-user-select: none;  /* Chrome all / Safari all */
     -moz-user-select: none;     /* Firefox all */
     -ms-user-select: none;      /* IE 10+ */
      user-select: none;          /* Likely future */             
   }

Link zur detaillierten Beschreibung

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

Wenn Sie die Auswahl und Hervorhebung für die gesamte Seite deaktivieren möchten, können Sie dies leicht mit css tun

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

Mit CSS-

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

  "unselectable='on' onselectstart="return false;"
  onmousedown="return false;
}

<div>
  Blabla
  <br/> More Blabla
  <br/> More Blabla...
</div>

Noch besser, Sie können die Textauswahl deaktivieren.

wenn Sie SASS (SCSS) mögen und keinen Kompass verwenden möchten, können Sie dies tun

styles.scss

@mixin user-select($select) {
  -webkit-touch-callout:#{$select};
  @each $pre in -webkit-, -moz-, -ms-, -o-, -khtml- {
  #{$pre + user-select}: #{$select};
  } 
  #{user-select}: #{$select};
}

.no-select {
  @include user-select(none);
}

Ich habe die verschiedenen Browser-CSS mit dem für IE <9 erforderlichen nicht auswählbaren Tag kombiniert.

<style>
[unselectable="on"] {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */
}
</style>
<div unselectable="on">Unselectable Text</div>

Möglicherweise können Sie diese Lösung bis dahin verwenden

nav li {
	display: inline-block;
	position: relative;
}

nav li a {
	display: inline-block;
	padding: 10px 20px;
}

nav li a:hover {
	color: red;
}

nav li.disabled:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

<nav>
	<ul>
	<li><a href="#">Link</a></li>
	<li class="disabled"><a href="#">Link</a></li>
	<li><a href="#">Link</a></li>
	</ul>
</nav>

JsFiddle - https://jsfiddle.net/grinmax_/9L1cckxu/

:: Auswahl {Hintergrund: transparent; Farbe: transparent;}

:: - moz-selection {hintergrund: transparent; Farbe: transparent;}

Möglicherweise möchten Sie auch verhindern, dass das Kontextmenü angezeigt wird, wenn Sie Elemente wie Schaltflächen berühren, deren Auswahl verhindert wurde. Fügen Sie dazu diesen Code der gesamten Seite oder nur diesen Schaltflächenelementen hinzu:

$("body").on("contextmenu",function(e){
    return false;
});