CSS-Fehler doubleclick ändert Textbild und Header-Hintergrund sowie Schriftfarbe

Question

Ich möchte nicht, dass meine HTML-Tags die Farbe und den Hintergrund ändern, wenn es doppelt darauf klickt, wie Sie in diesem Bild sehen können "Frage" ändert seine Farbe zu Weiß und Hintergrund zu Blau, als ich darauf draufleckte. Wie kann ich dieses Problem lösen?

Answer 1

Sie beziehen sich auf ein css ::selection Attribut. Die Farbe verändert sich nicht wirklich, dies ist ein natives Browserverhalten, das Benutzern hilft, Text auszuwählen und zu kopieren. Sie können es loswerden, aber Sie müssen verstehen, dass Sie ein sehr wichtiges Usability-Muster brechen werden. Die Leute erwarten, dass die Auswahl funktioniert, auch wenn sie stilisiert ist.

Ich würde Ihnen dringend empfehlen, dieses Verhalten nicht zu deaktivieren, sondern es an Ihr Design anzupassen, wenn Sie es wirklich brauchen.

p::selection { 
 
    color: red; 
 
    background: yellow; 
 
} 
 

 
div::selection { 
 
    color: green; 
 
    background: blue; 
 
}

<p>Questions that may already have your answer</p> 
 

 
<div>Another option of text highlight</div>

Answer 2

, dass das Standardauswahlverhalten für Ihren Browser ist. Wenn Sie die Auswahl insgesamt deaktivieren möchten, können Sie user-select: none; für Ihr Element verwenden.