:: valik - CSS-trikid | CSS-i almanahh 2025

Valige see lause kursori abil. Pange tähele, kuidas teksti valimisel täidab taustavärv ruumi? Stiiliga saate muuta valitud teksti taustavärvi ja värvi ::selection. Selle pseudoelemendi stiil sobib suurepäraselt kasutaja valitud teksti sobitamiseks teie saitide värviskeemiga.

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

Pange tähele, et topeltkoolon on selle pseudoelemendi süntaksis vajalik, hoolimata sellest, et teised pseudoelemendid aktsepteerivad ühte käärsoole.

Nagu eespool näha, saate ::selectionüksikute elementide jaoks stiili luua . Samuti saate kogu lehe stiili kujundada, jättes oma stiililehele palja pseudoelemendi.

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

Toimib ainult kolm atribuuti ::selection:

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

Vaadake Chris Coyieri (@chriscoyier) valikutest Pen :: valikutestid CodePenil.

Kui proovite stiili ::selectionluua atribuudiga, mida pole loendis, siis seda omadust ignoreeritakse. Selles backgroundloendis võib olla keeruline näha , sest atribuut renderdab värvi ainult siis, kui seda kasutatakse, ::selectionja see ei renderi taustpilti ega gradienti.

Ärge proovige ka seda:

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

Kui brauserid leiavad osa valikust, millest nad aru ei saa, viskavad nad kogu asja maha, nii et see ebaõnnestub kogu aeg.

Üks kõige kasulikumaid kasutusviise ::selectionon text-shadowvaliku väljalülitamine . A text-shadowvõib olla vastuolus valiku taustavärviga ja muuta teksti raskesti loetavaks. Seadistage text-shadow: none;tekst selgeks ja valiku ajal hõlpsasti loetavaks.

Vaadake CodePenist Chris Coyieri (@chriscoyier) pliiatsi :: valiku tekstivarju.

Fancy :: valik

Koos Sassi või mõne muu eeltöötlusprotsessoriga saate teha tõeliselt lahedaid efekte ::selection. Valige allolevast demost tekst:

Võite märgata, et mõnes brauseris pole efekt nii sujuv. Esitame selle demo all: asjad, mis on võimalikud, kuid tõenäoliselt lihtsalt oma lõbuks.

Teine nüri, kuid lõbus väike nipp on pildi paljastamine valitud teksti kaudu.

Brauseri tugi

Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.