::selection

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>

Erlaubte Eigenschaften

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

• color
• background-color
• text-decoration und die dazugehörigen Eigenschaften
• text-shadow
• -webkit-text-stroke-color, -webkit-text-fill-color und -webkit-text-stroke-width

Insbesondere background-image wird ignoriert.

Syntax

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

Barrierefreiheit

Überschreiben Sie keine ausgewählten Textstile aus rein ästhetischen Gründen — Benutzer können sie an ihre Bedürfnisse anpassen. Für Personen, die kognitive Bedenken oder weniger technologische Kenntnisse haben, können unerwartete Änderungen an Auswahlstilen ihr Verständnis der Funktionalität beeinträchtigen.

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

Das Farbkontrastverhältnis wird ermittelt, indem die Helligkeit des ausgewählten Textes und der ausgewählten Hintergrundfarben verglichen wird. 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.)

• WebAIM: Color Contrast Checker
• MDN Understanding WCAG, Guideline 1.4 Erklärungen
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis WCAG 2.0

Beispiele

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;
}

/* 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

Browser-Kompatibilität

Siehe auch

• pointer-events - Steuerung, welche Ereignisse auf dem Element aktiv sind