Markieren von Texten mit CSS beeinflussen

CSS Funktion selection und user-select — Markieren von Texten mit CSS beeinflussen

Mit CSS kann definiert werden, wie das Aussehen eines Textes verändert werden soll, wenn er markiert wird. Oder mit CSS kann konfiguriert werden, dass ein Text durch den Benutzer nicht markiert werden kann. In diesem Artikel zeige ich, mit welchem CSS-Parameter das Markieren von Texten beeinflusst werden kann.

Donnerstag, 28. April 2016

0 Kommentare

Web Development

CSS

Textelemente farblich hinterlegen

Das CSS-Pseudoelement ::selection kann eingesetzt werden, um das Aussehen eines Elements zu definieren, welches markiert wird. Darüber kann zum Beispiel die Hintergrundfarbe eines markierten Textes verändert werden. Das nachfolgende CSS-Beispiel sorgt dafür, dass jeder markierte Text einen orangen Hintergrund erhält.

::selection{ background-color: orange;
}

Weitere Informationen zu der CSS-Funktion user-select können im Mozilla Developer Network web docs nachgelesen werden.

Markieren von Texten verhindern

Mit der CSS-Funktion user-select und dem Attribut none kann das Markieren von Texten unterbunden werden. Ohne Browser-Prefix wird der Befehl nur von Chrome und Safari interpretiert. Weitere Informationen zu der CSS-Funktion user-select können im Mozilla Developer Network web docs nachgelesen werden.

.antiselect{ user-select: none;
}

Diese Funktion bietet keinen echten Schutz, denn über die Ansicht des Quelltextes und die Entwicklertools der Web-Browser kann trotzdem auf den Inhalt zugegriffen werden.

Artikel teilen:

Über Tobias Scheible

Hallo, mein Name ist Tobias Scheible. Ich bin begeisterter Informatiker und Sicherheitsforscher mit den Schwerpunkten Cyber Security und IT-Forensik. Mein Wissen teile ich gerne anhand von Fachartikeln hier in meinem Blog und in meinem Fachbuch. Als Referent halte ich Vorträge und Workshops für Verbände und Unternehmen u. a. auch offene Veranstaltungen für den VDI und die IHK.