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.

Kommentare

Es wurde noch kein Kommentar abgegeben.

Schreibe einen Kommentar!

Hilfe zum Kommentieren und Hiweise

Um kommentieren zu können, geben sie bitte mindestens ihren Namen und ihre E-Mail-Adresse an. Bitte nutzen Sie die Kommentarfunktion nicht dazu, andere zu beleidigen oder Spam zu verbreiten. Trolle und Spammer sind hier unerwünscht! Unangemessene Kommentare, die zum Beispiel gegen geltendes Recht verstoßen, eine Gefährdung anderer Besucher darstellen oder keinen sinvollen Inhalt beinhalten, werden gelöscht oder angepasst.

Name: Ihr Name, der oberhalb des Kommentars steht, gerne auch Ihren echten Namen, das erleichtert die Kommunikation für alle. Sollte ein Spam-Keyword als Name verwendet werden, kann dieses entfernt oder korrigiert werden.

E-Mail: Ihre E-Mail Adresse dient zur Identifizierung weiterer Kommentare und damit ich direkt Kontakt aufnehmen kann. Die E-Mail Adresse wird natürlich nicht veröffentlicht und nicht weitergegeben.

Website: Hier können Sie ihren eigenen Blog bzw. ihre eigene Website eintragen, dadurch wird Ihr Name und Ihr Avatar-Bild verlinkt. Werden rein kommerzielle Angebote offensichtlich beworben, setze ich den Link auf nofollow und unangemessene werden einfach entfernt.

Erlaubte HTML-Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <cite> <code> <del datetime=""> <q cite=""> <strike> <hr> <big>