От автора: перед копированием или редактированием текста, необходимо произвести его выделение – мышкой, касанием, жестом или стилусом. По умолчанию в большинстве браузеров контент подсвечивается ярко голубым цветом, но с помощью CSS это можно изменить.
Псевдо-селектор ::selection определяет способ отображения выбранных элементов. Точно так же, как с ::visited, изменять можно только значения нескольких свойств: color, background (или отдельно background-color и background-image) и text-shadow. К примеру, код ниже сделает фон выделенных элементом красным:
1 2 |
::moz-selection { background: red; } ::selection { background: red; } |
В Firefox на момент написания статьи все еще требуются вендорные префиксы для псевдо-селекторов. Обратите внимание, что вендорный префикс объявлен отдельно от обычного свойства; если их сгруппировать, селекторы повлияют друг на друга, и эффект будет отменен.
::selection также можно применить только к конкретным элементам: в примере ниже при выделении заголовка h1 будет изменен его фон.
1 2 |
h1::moz-selection { background: red; } h1::selection { background: red; } |
Из-за неточного определения ::selection был удален из CSS спецификации; но вернулся в Selectors Level 4. Несмотря на все, браузеры за исключением iOS Safari и Opera Mini оставили поддержку псевдо-селектора.
Будьте внимательны, если вы с помощью ::selection меняете значение background, сохраняйте соотношение контрастности текста; браузер за вас этого не сделает. К примеру, для черного текста с темным значением фона в псевдо-селекторе ::selection, необходимо сменить цвет выделенного текста на белый:
1 2 |
h1::moz-selection { background: black; color: white; } h1::selection { background: black; color: white; } |
Источник: //thenewcode.com/
Редакция: Команда webformyself.