::selection

Markieren Sie diesen Satz mit Ihrem Cursor. Beachten Sie, wie beim Markieren des Textes eine Hintergrundfarbe den Bereich füllt? Sie können die Hintergrundfarbe und die Farbe des ausgewählten Textes ändern, indem Sie ::selection stylen. Das Stylen dieses Pseudo-Elements eignet sich hervorragend, um den vom Benutzer ausgewählten Text an das Farbschema Ihrer Website anzupassen.

p::selection {
  background: #fff;
  color: #ff0000;
}

Beachten Sie, dass beim Syntax für dieses Pseudo-Element der Doppelpunkt notwendig ist, obwohl andere Pseudo-Elemente einen einzelnen Doppelpunkt akzeptieren.

Wie oben gezeigt, können Sie ::selection für einzelne Elemente stylen. Sie können auch die gesamte Seite stylen, indem Sie das bloße Pseudo-Element in Ihre Stylesheets einfügen.

::selection { background: yellow; }

Es gibt nur drei Eigenschaften, mit denen ::selection funktioniert

• color
• background (insbesondere die Langhand-Eigenschaften background-color, background-image)
• text-shadow

Wenn Sie versuchen, ::selection mit einer Eigenschaft zu stylen, die nicht auf der Liste steht, wird diese Eigenschaft ignoriert. Es kann schwierig sein, background auf dieser Liste zu sehen, da die Eigenschaft nur eine Farbe rendert, wenn sie mit ::selection verwendet wird, und sie kein Hintergrundbild oder -verlauf rendert.

Versuchen Sie auch nicht das

p::-moz-selection,
p::selection { color: red; }

Wenn Browser einen Teil einer Auswahl finden, den sie nicht verstehen, verwerfen sie das Ganze, sodass dies jedes Mal fehlschlägt.

Eine der nützlichsten Anwendungen für ::selection ist das Deaktivieren eines text-shadow während der Auswahl. Ein text-shadow kann mit der Hintergrundfarbe der Auswahl kollidieren und den Text schwer lesbar machen. Setzen Sie text-shadow: none;, um den Text bei der Auswahl klar und gut lesbar zu machen.

Fancy ::selection

In Verbindung mit Sass oder einem anderen Präprozessor können Sie mit ::selection wirklich coole Effekte erzielen. Wählen Sie den Text in der folgenden Demo aus

Sie bemerken vielleicht, dass der Effekt in einigen Browsern nicht so reibungslos ist. Betrachten wir diese Demo unter: Dinge, die möglich sind, aber wahrscheinlich nur zum Spaß.

Ein weiterer alberner, aber unterhaltsamer kleiner Trick ist das Hervorheben eines Hintergrundbildes durch ausgewählten Text.

Browser-Unterstützung

Weitere Informationen

• CSS Pseudo-Elements Module Level 4 specification
• MDN

Verwandt