![](files/cwe/animation/09-2020/markierfarbe.gif)
Farbe vom markierten Text ändern
![Hintergrundfarbe beim Markieren ändern Hintergrundfarbe beim Markieren ändern](assets/images/a/markierfarbe-1ae59607.gif)
Dieser kleine CSS-Trick ist tatsächlich kein sehr anspruchsvoller, dennoch sind es für mich genau diese kleinen Details, die einer Website das i-Tüpfel aufsetzten. Es geht um die Hintergrundfarbe und Textfarbe für Wörter, die vom User markiert wurden. Die Markierung wird über den Selektor ::selection angesprochen.
Markierte Wörter gestalten mit ::selection
Wollte ihr markierte Wörter mit ::selection gestalten, habt ihr die Möglichkeit color, background-color, cursor, outline, text-decoration, text-emphasis-color und text-shadow zu verwenden. In einem Fall habe ich mich dafür entschieden die Textfarbe, die Hintergrundfarbe und den Text-Schatten zu bearbeiten:
::selection {
background-color: #ec9000;
color: white;
text-shadow: 0px 0px 4px rgba(100,100,100,0.3)
}
![](assets/images/c/marvinCWEHintergrund-e587bcee.png)
Ich beschäftige mich seit Contao 3 mit dem CMS. Auf meinem Blog und auf YouTube findest du einige kostenlose Beiträge und Videos. Gerne unterstütze ich dich bei deinen Projekten, schau gern auf meiner Agentur-Website vorbei.
![](files/cwe/personenfotos/marvin-office-bg-abgerundete-ecken.png)
Du benötigst Unterstützung bei deiner Contao-Instanz?