css - unselectable - So deaktivieren Sie die Hervorhebung der Textauswahl




selectable none css (20)

Gibt es bei CSS-Ankern, die wie Schaltflächen (z. B. Fragen , Tags , Benutzer usw. oben auf der Seite Stack Overflow) oder Registerkarten fungieren, eine CSS-Standardmethode, um den Hervorhebungseffekt zu deaktivieren, wenn der Benutzer versehentlich den Text auswählt?

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

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


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


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

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


Bei den oben genannten Lösungen wird 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.


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

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 Sie möchten, dass Benutzer bestimmte Elemente nicht markieren und vermutlich kopieren und einfügen. 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 erinnern, wo sie sich auf der Seite befunden haben, oder mit einer 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.



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

Für Internet Explorer müssen Sie außerdem den Pseudo-Klassenfokus (.ClassName: Fokus) und den 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*/
}

Ich habe von der CSS-Tricks Website gelernt.

user-select: none;

Und das auch:

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

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

Um alle Elemente innerhalb von <div class="draggable"></div> deaktivieren, 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 dies 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 Pseudo-Selektor :not() . Sie können stattdessen '*' verwenden, wenn es Ihnen egal ist.

Vorsichtsmaßnahme: IE9 benötigt dieses zusätzliche jQuery-Teil möglicherweise nicht. Sie können dort also einen Versions-Check hinzufügen.


Obwohl dieses Pseudoelement in Entwürfen von CSS Selectors Level 3 enthalten war, wurde es in 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 How :: Selection behandelt, was für verschachtelte Elemente funktioniert .

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 zulassen, entstehen Usability-Probleme.


Problemumgehung für WebKit :

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

Ich habe es in einem CardFlip-Beispiel gefunden.


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

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

Um das gewünschte Ergebnis zu erhalten, musste ich sowohl ::selection als auch user-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; 
}

Wenn Sie die Textauswahl für alles außer für <p> -Elemente deaktivieren möchten, können Sie dies in CSS tun ( -moz-none auf die -moz-none das Überschreiben von -moz-none zulässt, 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;
}

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, aber für die alten Browser funktioniert es nicht. Es liegt ein Problem mit der Browserkompatibilität vor.


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

Wenn Sie den Wert "none" für alle CSS-Benutzerauswahlattribute wie unten angegeben eingeben, 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 der CSS-Tricks sagt, ist das Problem

  • WebKit erlaubt es weiterhin, den Text zu kopieren, wenn Sie Elemente um ihn herum auswählen.

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

UPDATE Januar 2017:

Gemäß Can I use wird die user-select derzeit in allen Browsern außer Internet Explorer 9 und früheren Versionen unterstützt (benötigt jedoch immer 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 eine nicht standardmäßige Funktion handelt (dh 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 der Dokumentation des Mozilla Developer Network .


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


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




textselection