:: избор - ЦСС-трикови | ЦСС Алманац 2025

Помоћу курсора одаберите ову реченицу. Приметите како, док одабирете текст, боја позадине испуњава простор? Боју позадине и боју изабраног текста можете променити стилом ::selection. Стилизовање овог псеудо елемента одлично је за подударање текста који су изабрали корисници са шемом боја ваших веб локација.

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

Имајте на уму да је двоструко двоточка неопходно у синтакси за овај псеудо елемент, упркос томе што други псеудо елементи прихватају једно двотачку.

Као што се види горе, можете обликовати ::selectionпоједине елементе. Такође можете стилизовати целу страницу испуштањем голог псеудо елемента у табелу стилова.

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

Постоје само три својства са којима ::selectionће се радити:

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

Погледајте тестове оловке :: Цхрис Цоииер (@цхрисцоииер) на ЦодеПен.

Ако покушате да обликујете ::selectionсвојство које није на листи, тада ће то својство бити занемарено. Можда је незгодно видети backgroundна тој листи јер ће својство приказивати боју само када се користи ::selectionи неће приказивати позадинску слику или градијент.

Такође не покушавајте ово:

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

Када прегледачи пронађу део селекције коју не разумеју, испуштају целу ствар, тако да ово све време неће успети.

Једна од најкориснијих употреба ::selectionје искључивање а text-shadowтоком избора. Канта се text-shadowможе сукобити са бојом позадине избора и отежати читање текста. Постављено text-shadow: none;тако да текст буде јасан и лак за читање током одабира.

Погледајте текст оловке :: избор текста - Цхрис Цоииер (@цхрисцоииер) на ЦодеПен.

Фанци :: избор

Упарен са Сасс-ом или било којим другим претпроцесором, можете направити заиста сјајне ефекте ::selection. Изаберите текст у демонстрацији испод:

Можда ћете приметити да ефекат у неким прегледачима није тако гладак. Поднимимо тај демо под: ствари које су могуће, али вероватно само из забаве.

Још један глуп, али забаван мали трик је откривање слике кроз одабрани текст.

Подршка прегледача

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.