Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

CSS ::selection – Textmarkierungen im Browser anpassen

Mit dem CSS-Pseudoelement ::selection habt ihr die Möglichkeit Textmarkierungen im Browser zu gestalten. Insbesondere wenn ihr davon ausgeht, dass Seitenbesucher auf eurer Website häufig Text markieren und kopieren werden – beispielsweise weil ihr regelmäßig Code-Snippets zur Verfügung stellt – lohnt es sich die Markierungen individuell hervorzuheben. Und natürlich lässt sich so auch das allgemeine Design einer Website positiv beeinflussen.

Der folgende CSS-Code wird benötigt um die Textmarkierung zu gestalten. Erwähnenswert ist hier vor allem die Eigenschaft text-shadow: none;. Solltet ihr in euer Website nämlich bereits Schatten mit CSS umgesetzt haben, so könnte dieser Effekt bei einer Textmarkierung zu Fehldarstellungen führen. Um das zu vermeiden wird der text-shadow innerhalb der Markierung deaktiviert.

::selection { 
   color: #000; 
   background: #ff9600; 
   text-shadow: none; 
}

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css-selection feature across the major browsers from caniuse.com

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 5 Kommentare

  1. Tobi
    schrieb am 04.09.2020 um 16:40 Uhr:

    Kann ich das auch für eine bestimmte Klasse machen?

    Antworten
    • Jonas Hellwig
      schrieb am 10.09.2020 um 13:56 Uhr:

      Ja – .class::selection { … }

      Antworten
  2. Alfred
    schrieb am 04.07.2019 um 13:10 Uhr:

    warum geht das in Chrome nicht :/

    Antworten
    • Jonas Hellwig
      schrieb am 22.07.2019 um 14:44 Uhr:

      Bei uns funktioniert es.

      Antworten
  3. Eduard Seifert
    schrieb am 17.05.2012 um 12:53 Uhr:

    Danke für den Hinweis mit text-shadow: none.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →