:: Auswahl - CSS-Tricks | CSS-Almanach 2025

Wählen Sie diesen Satz mit dem Cursor aus. Beachten Sie, wie bei der Auswahl des Textes eine Hintergrundfarbe den Raum ausfüllt? Sie können die Hintergrundfarbe und die Farbe des ausgewählten Texts durch Stylen ändern ::selection. Das Styling dieses Pseudoelements eignet sich hervorragend, um vom Benutzer ausgewählten Text an das Farbschema Ihrer Website anzupassen.

p::-moz-selection ( color: red) p::selection ( color: red; )

Beachten Sie, dass der Doppelpunkt in der Syntax für dieses Pseudoelement erforderlich ist, obwohl andere Pseudoelemente einen einzelnen Doppelpunkt akzeptieren.

Wie oben gezeigt, können Sie ::selectioneinzelne Elemente stylen. Sie können die gesamte Seite auch formatieren, indem Sie das bloße Pseudoelement in Ihrem Stylesheet ablegen.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Es gibt nur drei Eigenschaften, ::selectionmit denen gearbeitet werden kann:

color
background( background-color, background-image)
text-shadow

Siehe die Pen :: Auswahltests von Chris Coyier (@chriscoyier) auf CodePen.

Wenn Sie versuchen, ::selectionmit einer Eigenschaft zu formatieren, die nicht in der Liste enthalten ist, wird diese Eigenschaft ignoriert. Das Anzeigen backgroundin dieser Liste kann schwierig sein , da die Eigenschaft nur bei Verwendung eine Farbe rendert ::selectionund kein Hintergrundbild oder keinen Farbverlauf rendert.

Versuchen Sie auch nicht:

p::-moz-selection, p::selection ( color: red; )

Wenn Browser einen Teil einer Auswahl finden, den sie nicht verstehen, löschen sie das gesamte Objekt, sodass dies die ganze Zeit fehlschlägt.

Eine der hilfreichsten Anwendungen ::selectionist das Deaktivieren von a text-shadowwährend der Auswahl. A text-shadowkann mit der Hintergrundfarbe der Auswahl kollidieren und den Text schwer lesbar machen. Stellen Sie ein text-shadow: none;, dass der Text bei der Auswahl klar und leicht lesbar ist.

Siehe den Pen :: Auswahl-Textschatten von Chris Coyier (@chriscoyier) auf CodePen.

Phantasie :: Auswahl

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

Möglicherweise stellen Sie fest, dass der Effekt in einigen Browsern nicht so gleichmäßig ist. Lassen Sie uns diese Demo unter ablegen: Dinge, die möglich sind, aber wahrscheinlich nur zum Spaß.

Ein weiterer dummer, aber lustiger kleiner Trick besteht darin, ein Bild durch ausgewählten Text zu enthüllen.

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.