:: селекция - CSS-трикове

С помощта на курсора изберете това изречение. Забележете как докато избирате текста, цветът на фона запълва пространството? Можете да промените цвета на фона и цвета на избрания текст чрез стилизиране ::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

Вижте тестовете Pen :: selection от Chris Coyier (@chriscoyier) на CodePen.

Ако се опитате да стилизирате ::selectionсъс свойство, което не е в списъка, това свойство ще бъде игнорирано. Може да е трудно да се види backgroundв този списък, защото свойството ще изобрази цвят само когато се използва ::selectionи няма да изобрази фоново изображение или градиент.

Също така не опитвайте това:

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

Когато браузърите намерят част от избрана от тях, която не разбират, те изпускат цялото нещо, така че това ще се провали през цялото време.

Едно от най-полезните приложения ::selectionе изключването на a text-shadowпо време на избора. А text-shadowможе да се сблъска с цвета на фона на селекцията и да затрудни текста за четене. Задайте, за text-shadow: none;да направите текста ясен и лесен за четене по време на избора.

Вижте Pen :: selection text-shadow от Chris Coyier (@chriscoyier) на CodePen.

Фантазия :: избор

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

Може да забележите, че ефектът не е толкова гладък в някои браузъри. Нека запишем тази демонстрация под: неща, които са възможни, но вероятно само за забавление.

Друг тъп, но забавен малък трик е разкриването на изображение чрез избран текст.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.