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-select
Option nur für Mozilla .
Gibt es eine standardkonforme Möglichkeit, dies mit CSS zu erreichen, und wenn nicht, wie lautet der "Best Practice" -Ansatz?
css
cross-browser
highlight
textselection
Peter Mortensen
quelle
quelle
::selection { background: transparent; } ::-moz-selection { background: transparent; }
postcss
undautoprefixer
und Set Browser - Version, dannpostcss
alles kühl machen.Antworten:
UPDATE Januar 2017:
Laut Kann ich verwenden , wird das
user-select
derzeit 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:
Beachten Sie, dass
user-select
sich 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 .
quelle
<div onselectstart="return false;">
es dann meinem Hauptteil hinzu .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.In den meisten Browsern kann dies mithilfe proprietärer Variationen der CSS-
user-select
Eigenschaft erreicht werden, die ursprünglich in CSS 3 vorgeschlagen und dann aufgegeben und jetzt in CSS UI Level 4 vorgeschlagen wurden :Für Internet Explorer <10 und Opera <15 müssen Sie das
unselectable
Attribut des Elements verwenden, dessen Auswahl Sie aufheben möchten. Sie können dies mithilfe eines Attributs in HTML festlegen: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: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
mousedown
Ereignishandlers, derunselectable
das 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.
quelle
*.foo
und.foo
genau 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.Eine JavaScript-Lösung für Internet Explorer ist:
quelle
ondragstart
!body.onselectstart = function(e) { if (e.target.nodeName != "INPUT" && e.target.nodeName != "TEXTAREA") { e.preventDefault(); return false; } return true; }
input
Elementen auswählen , auch wenn ich benutzeuser-select: none
. Ich muss wissen, wie ich das verhindern kannBis die User-Select- Eigenschaft von CSS 3 verfügbar ist, unterstützen Gecko- basierte Browser die
-moz-user-select
bereits 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.
quelle
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-none
was das Überschreiben in Unterelementen ermöglicht, was in anderen Browsern mit zulässig istnone
):quelle
p, input { -webkit-user-select: text; -khtml-user-select: text; -moz-user-select: text; -o-user-select: text; user-select: text; }
-moz-none
undnone
sind gleich.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.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:
Dadurch wird Ihr Text völlig flach, wie es in einer Desktop-Anwendung der Fall wäre.
quelle
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!"Sie können dies in Firefox und Safari tun (Chrome auch?)
quelle
Problemumgehung für WebKit :
Ich habe es in einem CardFlip-Beispiel gefunden.
quelle
transparent
anstelle von rgba funktioniert auch in Chrome 42 unter Android.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:Wenn Sie jQuery verwenden, fügen Sie dies in einem
$(document).ready()
Block hinzu: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.
quelle
-moz-user-select: Normal;
jQuery.browser
ist ab Version 1.3 veraltet und wurde in Version 1.9 entfernt - api.jquery.com/jQuery.browserEs ist jedoch nicht der beste Weg.
quelle
title
als Attribut verwenden.user-select
die nicht funktionieren.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 / CSS:
quelle
Für den Internet Explorer zusätzlich, müssen Sie hinzufügen Pseudo-Klasse
focus
(.className: Fokus) undoutline-style: none
.quelle
className
Klasse beginnt . Siehe diese JSBin .Versuchen Sie, diese Zeilen in das CSS einzufügen, und rufen Sie das "disHighlight" in der class-Eigenschaft auf:
quelle
Ein schnelles Hack-Update
Wenn Sie den Wert
none
für alle CSS-user-select
Eigenschaften (einschließlich der Browserpräfixe) verwenden, liegt ein Problem vor, das dennoch auftreten kann.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 Wertnone
in ändernall
.quelle
Für diejenigen, die Probleme haben, dasselbe im Android-Browser mit dem Touch-Ereignis zu erreichen, verwenden Sie:
quelle
Wenn Sie Less und Bootstrap verwenden, können Sie schreiben:
quelle
quelle
Arbeiten
CSS:
Dies sollte funktionieren, funktioniert aber nicht für die alten Browser. Es liegt ein Problem mit der Browserkompatibilität vor.
quelle
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.
Mit SASS (SCSS-Syntax)
Sie können dies mit einem Mixin tun :
In einem HTML-Tag:
Probieren Sie es in diesem CodePen aus .
Wenn Sie einen Autoprefixer verwenden , können Sie andere Präfixe entfernen.
Browserkompatibilität hier .
quelle
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.
quelle
Dies funktioniert in einigen Browsern:
Fügen Sie einfach Ihre gewünschten Elemente / IDs vor den durch Kommas getrennten Selektoren ohne Leerzeichen hinzu, wie folgt:
Die anderen Antworten sind besser; Dies sollte wahrscheinlich als letzter Ausweg gesehen werden.
quelle
Angenommen, es gibt zwei
div
davon:Setzen Sie den Cursor auf die Standardeinstellung, damit der Benutzer ein nicht auswählbares Gefühl erhält.
quelle
Dies ist nützlich, wenn auch keine Farbauswahl erforderlich ist:
... alle anderen Browser-Korrekturen. Es funktioniert in Internet Explorer 9 oder höher.
quelle
color: inherit;
vielleicht.Fügen Sie dies dem ersten Div hinzu, in dem Sie die Auswahl für Text deaktivieren möchten:
quelle
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.
quelle
Um das gewünschte Ergebnis zu erzielen, musste ich sowohl
::selection
als auch verwendenuser-select
quelle
Es ist leicht zu machen mit:
Alternative:
Nehmen wir an, Sie haben eine
<h1 id="example">Hello, World!</h1>
. Sie müssen das innerHTML davon entfernenh1
, in diesem Fall Hello, World . Dann müssen Sie zu CSS gehen und dies tun:Jetzt denkt es einfach, es sei ein Blockelement und kein Text.
quelle
Dies ist kein CSS, aber es ist eine Erwähnung wert:
jQuery UI Auswahl deaktivieren :
quelle
Überprüfen Sie meine Lösung ohne JavaScript:
jsFiddle
Popup-Menü mit meiner angewendeten Technik: http://jsfiddle.net/y4Lac/2/
quelle
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
Bei Auswahl
Wenn Benutzer den Text nicht auswählen können, treten Probleme mit der Benutzerfreundlichkeit auf.
quelle