:: izbor - CSS-triki | Almanah CSS 2025

S kazalko izberite ta stavek. Ali ste opazili, kako pri izbiri besedila barva ozadja zapolni prostor? Barvo ozadja in barvo izbranega besedila lahko spremenite s stilom ::selection. Oblikovanje tega psevdo elementa je odlično za ujemanje uporabniško izbranega besedila z barvno shemo vaših spletnih mest.

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

Upoštevajte, da je dvojno dvopičje nujno v sintaksi tega psevdo elementa, kljub temu da drugi psevdoelementi sprejmejo eno samo dvopičje.

Kot je razvidno zgoraj, lahko oblikujete ::selectionposamezne elemente. Celotno stran lahko tudi oblikujete tako, da spustite goli psevdo element v tabelo s slogi.

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

Obstajajo samo tri lastnosti, s katerimi ::selectionlahko delate:

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

Oglejte si Pen :: izbirne teste Chrisa Coyierja (@chriscoyier) na CodePen.

Če poskušate oblikovati slog ::selectionz lastnostjo, ki ni na seznamu, bo ta lastnost prezrta. Morda je težavno videti backgroundna tem seznamu, ker bo lastnost barvo upodobila le, ko jo uporabljate, ::selectionin ne bo upodobila slike ozadja ali preliva.

Ne poskusite tudi tega:

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

Ko brskalniki najdejo del izbranega, ki ga ne razumejo, spustijo celoto, tako da ta ves čas ne bo uspel.

Ena najbolj uporabnih načinov uporabe ::selectionje izklop text-shadowmed izbiro. A se text-shadowlahko spopade z barvo ozadja izbora in oteži branje besedila. Nastavite tako, text-shadow: none;da bo besedilo med izbiro jasno in enostavno za branje.

Oglejte si Pen :: selection text-shadow avtorja Chrisa Coyierja (@chriscoyier) na CodePen.

Fancy :: izbor

V kombinaciji s Sassom ali katerim koli drugim predprocesorjem lahko ustvarite res odlične učinke ::selection. Izberite besedilo v spodnji predstavitvi:

Morda boste opazili, da učinek v nekaterih brskalnikih ni tako gladek. Vstavimo to predstavitev pod: stvari, ki so možne, a verjetno zgolj za zabavo.

Še en neumen, a zabaven trik je razkrivanje slike skozi izbrano besedilo.

Podpora za brskalnik

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.