::selection

Limited availability

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

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

Probieren Sie es aus

Erlaubte Eigenschaften

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

Insbesondere wird background-image ignoriert.

Syntax

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

Barrierefreiheit

Überschreiben Sie die Stile für ausgewählten Text nicht aus rein ästhetischen Gründen — Benutzer können sie an ihre Bedürfnisse anpassen. Für Personen mit kognitiven Herausforderungen oder geringerer technischer Erfahrung könnten unerwartete Änderungen an Auswahlstilen das Verständnis der Funktionalität erschweren.

Falls Stile überschrieben werden, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen den Textfarben und den Hintergrundfarben der Auswahl hoch genug ist, damit Personen mit Sehbehinderungen den Text lesen können.

Das Farbkontrastverhältnis wird durch den Vergleich der Helligkeit des ausgewählten Textes und des Hintergrunds des ausgewählten Textes bestimmt. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, 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

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::selection
Supports the text-decoration property

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch

  • pointer-events - Kontrolle darüber, welche Ereignisse auf dem Element aktiv sind