wake-up-neo.net

So beenden Sie das Hervorheben eines div-Elements durch Doppelklicken

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

76
dave

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 das HTML-Attribut unselectable zu zielen, muss stattdessen verwendet werden:

<div unselectable="on">Test Text</div>
135
tw16

Das funktioniert bei mir

html
{
  -webkit-tap-highlight-color:transparent;
}
39
Hans

Ich habe versucht, eine Lösung zu finden, um die Hervorhebung von div in Chrome zu stoppen, und habe mich diesem Beitrag zugewandt. Aber leider hat keine der Antworten mein Problem gelöst.

Nach vielen Online-Recherchen stellte ich fest, dass die Lösung sehr einfach ist. Es ist kein komplexes CSS erforderlich. Fügen Sie einfach das folgende CSS zu Ihrer Webseite hinzu und Sie sind 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. Also Wird in allen gängigen Browsern von heute unterstützt, wie unter dieser URL erläutert: http://www.w3schools.com/cssref/pr_outline-style.asp

27
Sunil

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. Auf diese Weise wird beispielsweise verhindert, dass auf meiner Seite überall Hervorhebungen vorgenommen werden, ohne dass andere Arten von Interaktivität beeinträchtigt werden:

*, *: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 (via http://adamschwartz.co/magic-of-css/chapters/1-the-box/ ).

7
SterlingVix

Alle div-Elemente anvisieren:

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

Alle Elemente anvisieren:

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

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

den Hintergrund für das ausgewählte Element transparent machen:

div::-moz-selection { background:transparent; }
div::selection { background:transparent; }
1
Jin.