:: pasirinkimas - CSS-gudrybės | CSS almanachas 2025

Naudodami žymeklį pasirinkite šį sakinį. Atkreipkite dėmesį, kaip pasirinkus tekstą fono spalva užpildo vietą? Stiliuodami galite pakeisti pasirinkto teksto fono spalvą ir spalvą ::selection. Šio pseudo elemento stilius puikiai tinka pritaikyti vartotojo pasirinktą tekstą jūsų svetainių spalvų schemai.

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

Atkreipkite dėmesį, kad šio pseudo elemento sintaksėje būtina dviguba dvitaškis, nepaisant to, kad kiti pseudo elementai priima vieną dvitaškį.

Kaip matyti aukščiau, galite stilizuoti ::selectionatskirus elementus. Taip pat galite suformuoti visą puslapį, nuleisdami pliką pseudo elementą savo stiliaus lape.

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

Yra tik trys savybės, ::selectionkurios veiks:

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

Peržiūrėkite Chris Coyier (@chriscoyier) „Pen :: Selection“ testus „CodePen“.

Jei bandysite stilių sukurti ::selectionsu savybe, kurios nėra sąraše, ta savybė bus ignoruojama. Tai gali būti keblu matyti backgroundtame sąraše, nes ypatybė pateiks spalvą tik tada, kai bus naudojama, ::selectionir nepateiks fono paveikslėlio ar gradiento.

Taip pat neišbandykite to:

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

Naršyklės radusios dalį nesuprantamo pasirinkimo, atsisako viso to, todėl tai nepavyks visą laiką.

Vienas iš naudingiausių naudojimo būdų ::selectionyra išjungti text-shadowpasirinkimą. A text-shadowgali prieštarauti pasirinkimo fono spalvai ir apsunkinti tekstą. Nustatykite text-shadow: none;, kad tekstas būtų aiškus ir lengvai skaitomas pasirinkimo metu.

Žiūrėkite „Pen :: selection text-shadow“, kurį sukūrė Chrisas Coyier (@chriscoyier) „CodePen“.

Išgalvotas :: pasirinkimas

Suporuoti su „Sass“ ar bet kuriuo kitu išankstiniu procesoriumi, galite sukurti tikrai puikius efektus ::selection. Pasirinkite tekstą žemiau esančioje demonstracinėje versijoje:

Galite pastebėti, kad kai kuriose naršyklėse efektas nėra toks sklandus. Pateikime tą demonstracinę versiją: dalykai, kurie yra įmanomi, bet tikriausiai tik dėl pramogos.

Kitas kvailas, bet įdomus mažas triukas yra vaizdo atskleidimas per pasirinktą tekstą.

Naršyklės palaikymas

Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.