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?

— Dave
quelle

In welchem Browser bist du? Bei meinen Tests konnte ich in Firefox 5, Chrome 12 oder IE9 kein ganzes Div hervorheben.

— Tw16

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