::selection

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das ::selection CSS-Pseudo-Element wendet Stile auf den Teil eines Dokuments an, der vom Benutzer hervorgehoben wurde (z. B. durch Klicken und Ziehen der Maus über Text).

Probieren Sie es aus

p::selection {
  color: red;
  background-color: yellow;
}

<p>
  Select a fragment of this paragraph, to see how its appearance is affected.
</p>

Zulässige Eigenschaften

Nur bestimmte CSS-Eigenschaften können mit ::selection verwendet werden:

color
background-color
text-decoration und die damit verbundenen Eigenschaften
text-shadow
-webkit-text-stroke-color, -webkit-text-fill-color und -webkit-text-stroke-width

Insbesondere wird background-image ignoriert.

Syntax

css

::selection {
  /* ... */
}

Überschreiben Sie nicht die Auswahlstile aus rein ästhetischen Gründen — Benutzer können diese an ihre Bedürfnisse anpassen. Für Personen mit kognitiven Einschränkungen oder geringerer technologischer Kompetenz können unerwartete Änderungen der Auswahldarstellungen das Verständnis der Funktionalität beeinträchtigen.

Wenn überschrieben, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen den Text- und Hintergrundfarben der Auswahl hoch genug ist, damit Menschen mit Sehbehinderungen es lesen können.

Das Farbkontrastverhältnis wird ermittelt, indem die Leuchtkraft des ausgewählten Textes und der Hintergrundfarben des ausgewählten Textes verglichen wird. Um die aktuellen Richtlinien für barrierefreie Webinhalte (WCAG) zu erfüllen, muss Textinhalt ein Kontrastverhältnis von 4,5:1 aufweisen, oder 3:1 für größeren Text wie Überschriften. (WCAG definiert großen Text als zwischen 18.66px und 24px und fett, oder 24px oder größer.)

Beispiele

HTML

html

This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>

CSS

::-moz-selection {
  color: gold;
  background-color: red;
}

p::-moz-selection {
  color: white;
  background-color: blue;
}

css

/* Make selected text gold on a red background */
::selection {
  color: gold;
  background-color: red;
}

/* Make selected text in a paragraph white on a blue background */
p::selection {
  color: white;
  background-color: blue;
}

Ergebnis

Spezifikationen

Specification
CSS Pseudo-Elements Module Level 4 # selectordef-selection

Browser-Kompatibilität

Siehe auch

pointer-events - steuern, welche Ereignisse auf dem Element aktiv sind