::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 damit verbundenen Eigenschaften
• text-shadow
• -webkit-text-stroke-color, -webkit-text-fill-color und -webkit-text-stroke-width

Insbesondere wird background-image ignoriert.

Syntax

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

Barrierefreiheit

Überschreiben Sie keine Auswahltext-Stile aus rein ästhetischen Gründen — Benutzer können diese nach ihren Bedürfnissen anpassen. Für Personen mit kognitiven Beeinträchtigungen oder jene, die weniger technikaffin sind, können unerwartete Änderungen an Auswahlstilen das Verständnis der Funktionalität beeinträchtigen.

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

Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtkraft des ausgewählten Textes und der Hintergrundfarben des ausgewählten Textes gefunden. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, muss der Textinhalt ein Kontrastverhältnis von 4.5:1, oder 3:1 für größeren Text, wie Überschriften, haben. (WCAG definiert großen Text als zwischen 18.66px und 24px und fett, oder 24px oder größer.)

• WebAIM: Color Contrast Checker
• MDN Verständnis von WCAG, Erläuterungen zu Leitlinie 1.4
• Verständnis des Erfolgskriteriums 1.4.3 | W3C Verständnis von 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 - Kontrolle darüber, welche Ereignisse auf dem Element aktiv sind