So beenden Sie das Hervorheben eines div-Elements beim Doppelklicken

90

Ich habe dieses div-Element mit einem Hintergrundbild und möchte aufhören, das div-Element hervorzuheben, wenn ich darauf doppelklicke. Gibt es dafür eine CSS-Eigenschaft?

css xhtml tags highlighting double-click Dave
quelle
In welchem ​​Browser bist du? Bei meinen Tests konnte ich in Firefox 5, Chrome 12 oder IE9 kein ganzes Div hervorheben.
Tw16

Antworten:

154

Das folgende CSS verhindert, dass Benutzer Text auswählen können. Live-Beispiel: http://jsfiddle.net/hGTwu/20/

-webkit-user-select: none; /* Chrome/Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */

/* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;

Um IE9 nach unten und Opera auszurichten, unselectablemuss stattdessen das HTML-Attribut verwendet werden:

<div unselectable="on">Test Text</div>
tw16
quelle
das hat nicht verhindert, dass das gesamte div hervorgehoben wird. Mir ist aufgefallen, dass es nur für Text war. Ich möchte verhindern, dass das gesamte Div hervorgehoben wird, wenn Sie darauf doppelklicken.
Dave
@dave: Ich nahm an, dass das einzige Mal, wenn ein Doppelklick eine Hervorhebung verursachte, der Text darin war, was Sie meinten. Keine Notwendigkeit, abzustimmen.
Tw16
1
Funktioniert nicht in IE oder Opera. Sie benötigen das unselectableAttribut. Es gibt -o-user-selectübrigens keine .
Tim Down
Hinweis für SASS / SCSS-Benutzer: Sie können @include user-select(none);anstelle von rohem CSS
hilnius
Seltsamerweise wurden die Divs dadurch schleppbar, selbst wenn draggable = false, aber nur unter Firefox.
Rovyko
49

Das funktioniert bei mir

html
{
  -webkit-tap-highlight-color:transparent;
}
Hans
quelle
Dies sollte die beste Antwort sein.
JohnA10
11
Dies ist nur für Webkit-Browser wie Chrome und Safari relevant und funktioniert wahrscheinlich in keiner Version von IE oder Firefox.
Simon East
30

Ich habe versucht, eine Lösung zu finden, um das Hervorheben von Divs in Chrome zu stoppen, und mich diesem Beitrag zugewandt. Leider hat keine der Antworten mein Problem gelöst.

Nach vielen Online-Recherchen stellte ich fest, dass das Update sehr einfach ist. Es ist kein komplexes CSS erforderlich. Fügen Sie einfach das folgende CSS zu Ihrer Webseite hinzu und schon sind Sie fertig. Dies funktioniert sowohl auf Laptops als auch auf mobilen Bildschirmen.

div { outline-style:none;}

HINWEIS : Dies funktionierte in Chrome Version 44.0.2403.155 m. Außerdem wird es in allen gängigen Browsern von heute unterstützt, wie unter dieser URL erläutert: https://developer.mozilla.org/en-US/docs/Web/CSS/outline-style

Sunil
quelle
8

Ich bin kein CSS-Experte, aber ich denke, Sie können die Antwort von tw16 verwenden, solange Sie die Anzahl der betroffenen Elemente erhöhen. Dies verhindert beispielsweise, dass überall auf meiner Seite hervorgehoben wird, ohne dass eine andere Art von Interaktivität beeinträchtigt wird:

*, *:before, *:after {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
}

Diese erste Zeile wurde freundlicherweise von Paul Irish zur Verfügung gestellt (über http://adamschwartz.co/magic-of-css/chapters/1-the-box/ ).

SterlingVix
quelle
Verwenden Sie dieses CSS niemals, wenn Sie eine PWA unter iOS 13 haben. Dadurch wird die Tastatur vollständig blockiert.
Fer
2

Ziel alle div-Elemente:

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

Ziel alle Elemente:

::-moz-selection { background:transparent; }
::selection { background:transparent; }
jasonleonhard
quelle
1

Benutzerauswahl deaktivieren:

div {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

Hintergrund für ausgewähltes Element transparent setzen:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
Jin.
quelle
3
Während dieses Code-Snippet die Frage lösen kann, hilft eine Erklärung wirklich dabei, die Qualität Ihres Beitrags zu verbessern. Denken Sie daran, dass Sie die Frage für Leser in Zukunft beantworten und diese Personen möglicherweise die Gründe für Ihren Codevorschlag nicht kennen.
msrd0