Contao Dozent Marvin Kellermann

|

Farbe vom markierten Text ändern

Hintergrundfarbe beim Markieren ändern

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)
}

Zurück

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.

Du benötigst Unterstützung bei deiner Contao-Instanz?