:: urval - CSS-tricks | CSS Almanack 2025

Välj denna mening med hjälp av markören. Lägg märke till hur när du väljer texten fyller en bakgrundsfärg utrymmet? Du kan ändra bakgrundsfärg och färg för markerad text genom att utforma ::selection. Styling av detta pseudoelement är utmärkt för att matcha användarvalt text till dina webbplatsers färgschema.

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

Observera att dubbelpunkten är nödvändig i syntaxen för detta pseudoelement, trots att andra pseudoelement accepterar en enda kolon.

Som du ser ovan kan du utforma ::selectionenskilda element. Du kan också utforma hela sidan genom att släppa det nakna pseudo-elementet i ditt formatmall.

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

Det finns bara tre egenskaper som ::selectionkommer att fungera med:

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

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

Om du försöker utforma ::selectionmed en egendom som inte finns på listan ignoreras egenskapen. Det kan vara svårt att se backgroundi den listan eftersom egenskapen endast ger en färg när den används på ::selectionoch den kommer inte att göra en bakgrundsbild eller lutning.

Försök inte heller detta:

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

När webbläsare hittar en del av en markering som de inte förstår, tappar de hela saken, så detta misslyckas hela tiden.

En av de mest användbara användningarna för ::selectionär att stänga av en text-shadowunder valet. En text-shadowkan kollidera med markeringens bakgrundsfärg och göra texten svårläst. Ställ in för text-shadow: none;att göra texten tydlig och lätt att läsa under valet.

Se Pen :: urvalstext-skugga av Chris Coyier (@chriscoyier) på CodePen.

Fancy :: urval

Parat med Sass eller någon annan förprocessor kan du skapa riktigt coola effekter med ::selection. Välj texten i demo nedan:

Du kanske märker att effekten inte är så smidig i vissa webbläsare. Låt oss arkivera den demo: saker som är möjliga, men förmodligen bara för skojs skull.

Ett annat dumt men roligt litet trick är att avslöja en bild genom markerad text.

Webbläsarstöd

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.