W3docs
de
Anmelden

CSS ::selection Pseudo-Element

Das ::selection CSS-Pseudo-Element ermöglicht das Auswählen und Gestalten von Dokumentteilen. Lesen Sie mehr und probieren Sie Beispiele aus.

Das ::selection-Pseudo-Element zielt auf den Teil eines Dokuments ab, den der Benutzer markiert hat — zum Beispiel durch Klicken und Ziehen der Maus über Text oder durch Drücken von Ctrl/Cmd + A. Es ermöglicht, das standardmäßige Hervorhebungsaussehen des Browsers zu überschreiben, damit der ausgewählte Text zur Markenidentität passt oder der Kontrast verbessert wird.

Standardmäßig zeichnet der Browser ausgewählten Text mit einer betriebssystemspezifischen Hervorhebungsfarbe (normalerweise blauer Hintergrund mit weißem Text). Das Styling von ::selection ersetzt diesen Standard für die Elemente, die Sie ansprechen.

Dieses Kapitel behandelt die Syntax, welche Eigenschaften erlaubt sind, Browser-Präfix-Besonderheiten sowie praktische Beispiele für Text, mehrere Farben und Formularfelder.

Warum und wann es verwenden

Ein benutzerdefinierter Auswahl-Stil ist ein kleines Detail, das eine Website professionell wirken lässt:

  • Markenkonsistenz — Passen Sie die Hervorhebung an Ihre Akzentfarbe an, anstatt das OS-Blau zu verwenden.
  • Lesbarkeit — Bei einem dunklen oder kontrastarmen Hintergrund kann die Standardhervorhebung Text schwer lesbar machen; Sie können eine Kombination mit garantiertem Kontrast wählen.
  • Abgrenzung — Wenden Sie verschiedene Hervorhebungsfarben auf verschiedene Abschnitte an (zum Beispiel Codeblöcke gegenüber Fließtext).

Halten Sie den ausgewählten Text lesbar: Setzen Sie immer sowohl color als auch background-color gemeinsam, damit Sie nie z. B. weißen Text auf einer nahezu weißen Hervorhebung erhalten.

Welche Eigenschaften erlaubt sind

::selection ignoriert die meisten CSS-Regeln. Nur eine kleine, feste Menge von CSS-Eigenschaften kann zum Styling verwendet werden:

Eigenschaften wie font-size, font-family, margin oder transform haben keinen Effekt auf ausgewählten Text — die Auswahl ist lediglich eine Hervorhebung zur Zeichenzeit, kein echtes Element, das verschoben oder vergrößert werden kann.

Info

Firefox verwendete früher eine herstellerpräfixierte Form: ::-moz-selection. Um ältere Firefox-Versionen zu unterstützen, deklarieren Sie die präfixierte Regel vor der standardmäßigen ::selection-Regel, wie es die folgenden Beispiele tun.

Dieses Pseudo-Element wurde in CSS Selectors Level 3 eingeführt, dann entfernt und lebt jetzt in der CSS Pseudo-Elements Level 4-Spezifikation.

Standard und Version

CSS Pseudo-Elements Level 4

Syntax

CSS ::selection Pseudo-Element

::selection {
  css declarations;
}

Beispiel des ::selection-Pseudo-Elements:

CSS ::selection Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      ::-moz-selection {
        color: #eee;
        background: #8ebf42;
      }
      ::selection {
        color: #eee;
        background: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
    </p>
  </body>
</html>
Probier es selbst »

Beispiel des ::selection-Pseudo-Elements mit verschiedenen Farben:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .green::-moz-selection {
        background-color: #8ebf42;
      }
      .green::selection {
        background-color: #8ebf42;
      }
      .yellow::-moz-selection {
        background-color: #FFFF19;
      }
      .yellow::selection {
        background-color: #FFFF19;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>This is a text with the default selection background-color.</p>
    <p class="green">Select this text to see a green background.</p>
    <p class="yellow">Select this text to see a yellow background.</p>
  </body>
</html>
Probier es selbst »

Beispiel des ::selection-Pseudo-Elements mit den Tags <textarea> und <input>:

CSS ::selection, weiteres Code-Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input::-moz-selection {
        color: #1c87c9;
        background-color: #eee;
      }
      input::selection {
        color: #1c87c9;
        background-color: #eee;
      }
      textarea::-moz-selection {
        color: white;
        background-color: #8ebf42;
      }
      textarea::selection {
        color: white;
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>::selection selector example</h2>
    <p>Input element</p>
    <form>
      <input type="text" value="Select this input text" />
      <p>Textarea element</p>
      <textarea rows="5" cols="25">Select this textarea text</textarea>
    </form>
  </body>
</html>
Probier es selbst »

Was zu beachten ist

  • Es wird nicht wie normale Eigenschaften vererbt. Eine ::selection-Regel gilt für das Element, auf das sie abzielt; sie ist kein Wert, der wie color auf ausgewählte Kindelemente kaskadiert. Um die Auswahl seitenübergreifend zu gestalten, schreiben Sie eine Regel auf einem breiten Selektor wie ::selection (trifft alles) oder body ::selection.
  • Der Hintergrund muss ausreichend opak sein, um sichtbar zu sein. Eine background-color mit sehr niedrigem Alpha kann auf dem vorhandenen Hintergrund schwer zu erkennen sein.
  • Auf die Eigenschaftsliste beschränkt. Wenn eine Deklaration scheinbar keine Wirkung hat, überprüfen Sie die oben stehende Liste der erlaubten Eigenschaften — sie wird wahrscheinlich ignoriert.

Um tiefer in die einzelnen Eigenschaften einzutauchen, die hier verwendet werden können, lesen Sie color, background-color und text-shadow.

Übungen

Übung
Was können Sie mit dem ::selection-Pseudo-Element in CSS erreichen?
Was können Sie mit dem ::selection-Pseudo-Element in CSS erreichen?
Was this page helpful?