:: odabir - CSS-trikovi | CSS Almanah 2025

Pomoću kursora odaberite ovu rečenicu. Primijetite kako odabirom teksta boja pozadine ispunjava prostor? Bojom pozadine i bojom odabranog teksta možete promijeniti stil ::selection. Stiliziranje ovog pseudo elementa izvrsno je za podudaranje teksta koji su odabrali korisnici sa shemom boja vaših web lokacija.

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

Imajte na umu da je dvostruko dvotočka neophodno u sintaksi za ovaj pseudo element, unatoč tome što drugi pseudo elementi prihvaćaju jedno dvotočka.

Kao što se vidi gore, možete oblikovati ::selectionpojedine elemente. Također možete stilizirati cijelu stranicu ispuštanjem golog pseudo elementa u tablicu stilova.

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

Postoje samo tri svojstva s kojima ::selectionće se raditi:

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

Pogledajte testove Pen :: odabir Chrisa Coyiera (@chriscoyier) na CodePenu.

Ako pokušate oblikovati ::selectionsvojstvo koje nije na popisu, tada će se to svojstvo zanemariti. Možda je nezgodno vidjeti backgroundna tom popisu jer će svojstvo prikazati boju samo kada se koristi ::selectioni neće prikazati pozadinsku sliku ili gradijent.

Također ne pokušavajte ovo:

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

Kada preglednici pronađu dio odabranog dijela koji ne razumiju, ispuštaju cijelu stvar, tako da to cijelo vrijeme neće uspjeti.

Jedna od najkorisnijih namjena za ::selectionisključivanje je text-shadowtijekom odabira. Može text-shadowse sukobiti s bojom pozadine odabira i otežati čitanje teksta. Postavljeno text-shadow: none;kako bi tekst bio jasan i lak za čitanje tijekom odabira.

Pogledajte tekst olovke :: odabir Chris Coyier (@chriscoyier) na CodePen.

Fancy :: odabir

Uparen sa Sassom ili bilo kojim drugim pretprocesorom, možete napraviti stvarno sjajne efekte ::selection. Odaberite tekst u demonstraciji ispod:

Možda ćete primijetiti da učinak u nekim preglednicima nije tako gladak. Zabilježimo taj demo pod: stvari koje su moguće, ali vjerojatno samo iz zabave.

Još jedan glupi, ali zabavni mali trik je otkrivanje slike kroz odabrani tekst.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.