:: výber - Triky CSS | Almanach CSS 2025

Pomocou kurzora vyberte túto vetu. Všimnite si, ako pri výbere textu vyplní farba pozadia priestor? Stylizáciu môžete zmeniť farbu pozadia a farbu vybratého textu ::selection. Štýl tohto pseudoprvku je vynikajúci na zosúladenie textu vybratého používateľom s farebnou schémou vašich stránok.

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

Vezmite na vedomie, že dvojitý dvojbodka je v syntaxi tohto pseudoprvku nevyhnutná, napriek tomu ostatné pseudo prvky akceptujú jeden dvojbodku.

Ako je vidieť vyššie, môžete štylizovať ::selectionjednotlivé prvky. Môžete tiež upraviť štýl celej stránky tak, že v šablóne so štýlmi umiestnite holý pseudo prvok.

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

::selectionBudú fungovať iba tri vlastnosti :

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

Pozrite si testy Pen :: selection od Chrisa Coyiera (@chriscoyier) na CodePen.

Ak sa pokúsite vytvoriť štýl ::selections vlastnosťou, ktorá nie je na zozname, bude táto vlastnosť ignorovaná. Môže to byť zložité vidieť backgroundv tomto zozname, pretože vlastnosť vykreslí farbu iba vtedy, keď sa použije na, ::selectiona nevykreslí ani obrázok na pozadí alebo prechod.

Toto tiež neskúšajte:

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

Keď prehliadače nájdu časť výberu, ktorej nerozumejú, zrušia celú vec, takže to bude neustále zlyhávať.

Jedným z najužitočnejších použití ::selectionje vypnutie a text-shadowpočas výberu. Môže text-shadowbyť v rozpore s farbou pozadia výberu a sťažiť čítanie textu. Nastavené tak, text-shadow: none;aby bol text pri výbere jasný a ľahko čitateľný.

Pozrite si textový tieň Pen :: selection od Chrisa Coyiera (@chriscoyier) na CodePen.

Efektné :: výber

Spárované so Sass alebo iným preprocesorom môžete vytvoriť skutočne vynikajúce efekty ::selection. Vyberte text v ukážke nižšie:

Môžete si všimnúť, že efekt nie je v niektorých prehliadačoch taký plynulý. Ukážme túto ukážku pod: veci, ktoré sú možné, ale pravdepodobne len pre zábavu.

Ďalším nemým, ale zábavným trikom je odhalenie obrázka prostredníctvom vybraného textu.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.