::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
Zulässige Eigenschaften
Nur bestimmte CSS-Eigenschaften können mit ::selection
verwendet werden:
color
background-color
text-decoration
und die damit verbundenen Eigenschaftentext-shadow
-webkit-text-stroke-color
,-webkit-text-fill-color
und-webkit-text-stroke-width
Insbesondere wird background-image
ignoriert.
Syntax
::selection {
/* ... */
}
Barrierefreiheit
Ändern Sie nicht die Stile des ausgewählten Textes aus rein ästhetischen Gründen — Benutzer können sie an ihre Bedürfnisse anpassen. Für Menschen mit kognitiven Beeinträchtigungen oder geringerer technischer Bildung können unerwartete Änderungen der Auswahldarstellung das Verständnis der Funktionalität beeinträchtigen.
Wenn Änderungen vorgenommen werden, ist es wichtig sicherzustellen, dass das Kontrastverhältnis zwischen dem Text und den Hintergrundfarben der Auswahl hoch genug ist, damit Menschen mit Sehbeeinträchtigungen es lesen können.
Das Farbkontrastverhältnis wird durch den Vergleich der Leuchtdichte des ausgewählten Textes und der Hintergrundfarben des ausgewählten Textes ermittelt. Um den aktuellen Web Content Accessibility Guidelines (WCAG) zu entsprechen, muss der 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
This text has special styles when you highlight it.
<p>Also try selecting text in this paragraph.</p>
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
BCD tables only load in the browser
Siehe auch
pointer-events
- steuern, welche Ereignisse auf dem Element aktiv sind