:: valg - CSS-tricks | CSS Almanak 2025

Vælg denne sætning ved hjælp af markøren. Bemærk hvordan du vælger teksten, når en baggrundsfarve udfylder rummet? Du kan ændre baggrundsfarven og farven på den valgte tekst ved at style ::selection. Styling af dette pseudo-element er fantastisk til at matche brugervalgt tekst til dit sides farveskema.

p::-moz-selection ( color: red) p::selection ( color: red; )

Bemærk, at dobbelt kolon er nødvendigt i syntaksen for dette pseudo-element, på trods af at andre pseudo-elementer accepterer et enkelt kolon.

Som set ovenfor kan du style ::selectionpå individuelle elementer. Du kan også style hele siden ved at slippe det bare pseudo-element i dit typografiark.

::-moz-selection ( background: yellow; ) ::selection ( background: yellow; )

Der er kun tre egenskaber, ::selectionder fungerer med:

color
background( background-color, background-image)
text-shadow

Se Pen :: udvælgelsestest af Chris Coyier (@chriscoyier) på CodePen.

Hvis du prøver at style ::selectionmed en ejendom, der ikke er på listen, ignoreres den ejendom. Det kan være vanskeligt at se backgroundpå listen, fordi ejendommen kun gengiver en farve, når den bruges, ::selectionog den gengiver ikke et baggrundsbillede eller en gradient.

Prøv heller ikke dette:

p::-moz-selection, p::selection ( color: red; )

Når browsere finder en del af et valg, de ikke forstår, taber de det hele, så dette mislykkes hele tiden.

En af de mest nyttige anvendelser til ::selectioner at slukke for a text-shadowunder valg. En text-shadowkan kollidere med markeringens baggrundsfarve og gøre teksten vanskelig at læse. Indstillet text-shadow: none;til at gøre teksten klar og let at læse under markeringen.

Se Pen :: markering tekstskygge af Chris Coyier (@chriscoyier) på CodePen.

Fancy :: valg

Parret med Sass eller en hvilken som helst anden forprocessor, kan du lave virkelig seje effekter med ::selection. Vælg teksten i nedenstående demo:

Du bemærker muligvis, at effekten ikke er så jævn i nogle browsere. Lad os arkivere den demo under: ting der er mulige, men sandsynligvis bare for sjov.

Et andet dumt men sjovt lille trick afslører et billede gennem markeret tekst.