Farbige Textauswahl mit CSS

Kleine Effekte und Details runden eine Webseite visuell ab. CSS 3 bietet hierfür zahlreiche Möglichkeiten. Eine davon ist das farbige Unterlegen der Textauswahl, wodurch sich die oft trostlos wirkende Standardfarbe ersetzen lässt. Somit kann der Textauswahl, zumindest beschränkt, ein eigener Look verliehen werden, der sich an den Rest der Webseite anpasst.

Gearbeitet wird hierfür mit der Deklaration ::selection. Allerdings funktioniert diese, wie so vieles im Internet, nicht in allen Browsern gleichermaßen. Beim Firefox (ab Version 2) und Safari (ab Version 4) funktionierte der Test in allen Ausführungen. Zwar gab es kleinere Unterschiede, aber keine nennenswerten Probleme. Der Opera unterstützte im Test diese Funktion ab Version 9.5 und auch Googles Chrome Browser hatte keine Probleme bei der Anzeige. Einzig und allein der Internet Explorer beharrte auf der schwarzen Standard Markierung des Auswahltextes (Versionen 6 bis 8).

Damit die farbige Textauswahl funktioniert, muss dies im CSS wie folgt eingestellt werden:

#selection-light::selection {
background: #D4AB75;
}
#selection-dark::selection {
background: #9A2700;
color: #FFFFFF;
}

/* Firefox */
#selection-light::-moz-selection {
background: #D4AB75;
}
#selection-dark::-moz-selection {
background: #9A2700;
color: #FFFFFF;
}

In diesem Beispiel haben wir zwei verschiedene Absätze unterschiedlich einfärben wollen (’light’ und ‘dark’). Neben dem ::selection gibt es auch die Anweisung ::-moz-selection, die diese Funktion für den Firefox aktiviert. Die beiden folgenden Absätze veranschaulichen die Wirkung dieser CSS Zeilen.

Sofern die Markierung dieser Absätze farbig ist und den Balken darüber entspricht, wird diese Funktion vom verwendeten Browser unterstützt. Im vorliegenden Fall wurde nur jeweils ein Absatz mit einer anderen Auswahlfarbe belegt. Dies lässt sich aber ohne die vorangestellte ID auch für die komplette Webseite mit ::selection als Selektor festlegen.