::selection CSS pseudo-element

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>

Zulssige Eigenschaften

Nur bestimmte CSS-Eigenschaften knnen mit ::selection verwendet werden:

• color
• background-color
• text-decoration und die zugehrigen 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 nicht die Stile des ausgewhlten Texts aus rein sthetischen Grnden Benutzer knnen diese an ihre Bedrfnisse anpassen. Fr Menschen mit kognitiven Schwierigkeiten oder weniger technologischem Verstndnis knnen unerwartete nderungen der Auswahlstile das Verstndnis der Funktionalitt beeintrchtigen.

Wenn sie berschrieben werden, ist es wichtig sicherzustellen, dass das Kontrastverhltnis zwischen den Text- und Hintergrundfarben der Auswahl hoch genug ist, damit Menschen mit Sehbehinderungen es lesen knnen.

Das Farbkontrastverhltnis wird durch Vergleich der Leuchtkraft des ausgewhlten Textes und der Hintergrundfarben des ausgewhlten Textes ermittelt. Um die aktuellen Web Content Accessibility Guidelines (WCAG) zu erfllen, muss textueller Inhalt ein Kontrastverhltnis von 4.5:1 aufweisen oder 3:1 fr greren Text wie berschriften. (WCAG definiert groen Text als zwischen 18.66px und 24px und fett, oder 24px oder grer.)

• WebAIM: Color Contrast Checker
• MDN Verstndnis WCAG, Erluterungen zu Richtlinie 1.4
• Verstndnis des Erfolgskriteriums 1.4.3 | W3C Understanding 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-Kompatibilitt

Siehe auch

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