:: utvalg - CSS-triks | CSS-almanakk 2025

Velg denne setningen ved hjelp av markøren. Legg merke til hvordan når du velger teksten en bakgrunnsfarge fyller rommet? Du kan endre bakgrunnsfarge og farge på valgt tekst ved å stylere ::selection. Styling av dette pseudoelementet er flott for å matche brukervalgt tekst til fargevalget på nettsteder.

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

Vær oppmerksom på at dobbelt kolon er nødvendig i syntaksen for dette pseudo-elementet, til tross for at andre pseudo-elementer aksepterer et enkelt kolon.

Som vist ovenfor kan du style ::selectionpå individuelle elementer. Du kan også style hele siden ved å slippe det bare pseudo-elementet i stilarket ditt.

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

Det er bare tre egenskaper som ::selectionvil fungere med:

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

Se Pen :: utvalgstester av Chris Coyier (@chriscoyier) på CodePen.

Hvis du prøver å style ::selectionmed en eiendom som ikke er på listen, vil denne egenskapen bli ignorert. Det kan være vanskelig å se backgroundi den listen fordi egenskapen bare gjengir en farge når den brukes på, ::selectionog den vil ikke gjengi et bakgrunnsbilde eller en gradering.

Ikke prøv dette:

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

Når nettlesere finner en del av et utvalg de ikke forstår, slipper de hele saken, så dette mislykkes hele tiden.

En av de mest nyttige bruksområdene for ::selectioner å slå av en text-shadowunder valg. En text-shadowkan kollidere med utvalgets bakgrunnsfarge og gjøre teksten vanskelig å lese. Sett for text-shadow: none;å gjøre teksten klar og lett å lese under markeringen.

Se penn :: utvalg tekst-skygge av Chris Coyier (@chriscoyier) på CodePen.

Fancy :: utvalg

Parret med Sass, eller en hvilken som helst annen forprosessor, kan du lage virkelig kule effekter med ::selection. Velg teksten i demoen nedenfor:

Du kan merke at effekten ikke er så jevn i noen nettlesere. La oss arkivere den demoen under: ting som er mulige, men sannsynligvis bare for moro skyld.

Et annet dumt men morsomt lite triks er å avsløre et bilde gjennom valgt tekst.