it-swarm.com.de

So deaktivieren Sie die Markierung der Textauswahl

Für Anker, die sich wie Buttons (z. B. Questions , Tags , Users usw. oben auf der Seite Stack Overflow) oder Registerkarten verhalten, gibt es eine CSS-Standardmethode zum Deaktivieren der Hervorhebungseffekt, wenn der Benutzer versehentlich den Text auswählt?

Ich weiß, dass dies mit JavaScript möglich ist, und ein wenig googeln ergab die Mozilla-only-Option -moz-user-select.

Gibt es eine standardkonforme Methode, um dies mit CSS zu erreichen, und wenn nicht, wie lautet der Ansatz "Best Practice"?

4597
anon

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 .

6710
Blowsie

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.

776
Tim Down

Eine JavaScript-Lösung für IE ist

onselectstart="return false;"
177
Pekka 웃

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.

171
X-Istence

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

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.

114
ZECTBynmo

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

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

Problemumgehung für WebKit :

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

Ich habe es in einem CardFlip-Beispiel gefunden.

75
Alex

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.

67
Tom Auger

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

65
Ale

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>

62
Alireza

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*/
}
57
Elad Shechter

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.

46
suraj rawat
-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');
46
Gaurang

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;
}
46
Beep.exe

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

.user-select(none);
45
Codler

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

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.

33
hbw

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.

32
r3wt

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.

32
Gaurav Aggarwal

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.

29
karthipan raj

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

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.

Before we have selected anything

After we have selected

The numbers have been copied

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

Getestet am: Ubuntu , Google Chrome 38.0.2125.111.

28
Luke Madhanga

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

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

jQuery UI Auswahl deaktivieren :

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

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

21
zgnilec

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.

21
Suraj Naik

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

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;}
15
Mohammed Javed

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.

11
codeWithMe

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

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.

10
Pushp Singh

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

9
Chirag Dave
 -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
9

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

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>

6
Abrar Jahin

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

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>
4
omikes

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/

1
grinmax

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

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

0
Navneet Kumar

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;
});
0
GeekyMonkey