:: výběr - Triky CSS | Almanach CSS 2025

Pomocí kurzoru vyberte tuto větu. Všimněte si, jak při výběru textu vyplní barva pozadí prostor? Styl pozadí můžete změnit barvu pozadí a barvu vybraného textu ::selection. Styling tohoto pseudo prvku je skvělý pro přizpůsobení textu vybraného uživatelem k barevnému schématu vašich stránek.

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

Vezměte na vědomí, že dvojitý dvojtečka je nezbytná v syntaxi pro tento pseudoprvek, přestože ostatní pseudoprvky přijímají jediný dvojtečku.

Jak je vidět výše, můžete stylovat ::selectionna jednotlivých prvcích. Můžete také upravit celou stránku přetažením holého pseudo prvku do šablony stylů.

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

::selectionBudou fungovat pouze tři vlastnosti :

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

Podívejte se na testy Pen :: selection Chrisa Coyiera (@chriscoyier) na CodePen.

Pokud se pokusíte stylovat ::selections vlastností, která není na seznamu, bude tato vlastnost ignorována. Může být obtížné vidět backgroundv tomto seznamu, protože vlastnost vykreslí barvu pouze při použití ::selectiona nevykreslí obrázek na pozadí ani přechod.

Nezkoušejte to také:

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

Když prohlížeče najdou část výběru, které nerozumí, vypustí celou věc, takže to vždy selže.

Jedním z nejužitečnějších použití ::selectionje vypnutí a text-shadowběhem výběru. text-shadowMůže být v rozporu s barvou pozadí výběru a aby se text špatně čitelný. Nastaveno tak, text-shadow: none;aby byl text při výběru jasný a snadno čitelný.

Podívejte se na Pen :: selection textový stín od Chrisa Coyiera (@chriscoyier) na CodePen.

Fancy :: výběr

Spárované se Sassem nebo jakýmkoli jiným preprocesorem můžete vytvořit opravdu skvělé efekty ::selection. Vyberte text v ukázce níže:

Můžete si všimnout, že efekt není v některých prohlížečích tak plynulý. Pojďme tuto ukázku zařadit: věci, které jsou možné, ale pravděpodobně jen pro zábavu.

Dalším hloupým, ale zábavným trikem je odhalení obrázku prostřednictvím vybraného textu.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.