Выделение содержимого веб-страницы с помощью мышки, прикосновения, жеста или стилуса всегда предшествует его копированию или редактированию. Содержимое подсвечивается по умолчанию светло-голубым цветом в большинстве браузеров, но есть способ изменить это с помощью CSS.

Псевдоэлемент выделения определяет, как выглядит выделенный элемент. Как и псевдоэлемент посещения,  этот псевдоэлемент может влиять далеко не на все свойства, а только на такие как: цвет, фон или отдельно цвет фона и фоновое изображение и тень текста. Например, такая запись изменит цвет фона всех выбранных элементов на красный:

::selection { background: red; }

Обратите внимание, старым версиям браузера Firefox требовалась запись этого псевдоэлемента с приставкой производителя:

::moz-selection { background: red; }
::selection { background: red; }

И это объявление должно было быть записано отдельно от объявления без приставки производителя, а при объединении записей псевдоэлементы конфликтовали друг с другом и отменяли эффект. Хотя современным версиям браузера Firefox уже не требуется такая запись, ее все еще удобно использовать для обходных путей, как показано в примере ниже.

Псведоэлемент выделения может задавать стили только определенным элементам — в следующем примере меняется внешний вид при выделении только у элемента заголовка:

h1::selection { background: red; }

Псевдоэлемент выделения был удален из спецификации CSS из-за недостаточной проработанности и был добавлен назад в спецификации псевдоэлементов CSS4. Хотя все это время все браузеры, кроме Safari для IOS и Opera Mini, продолжали его поддерживать.

Убедитесь, что при смене фонового цвета с помощью псевдоэлемента выделения сохраняется отношение контрастности между текстом и фоном, браузеры не сделают это за Вас. Например, для черного текста с темным фоном выделения измените цвет выделенного текста на белый:

h1::moz-selection { background: black; color: white; }
h1::selection { background: black; color: white; }

Интересный вариант был предложен Viljami Salminen, Вы можете увидеть его ниже: цвет выделенного текста инвертируется, цвет фона выделения делается прозрачным и обводится внешний контур текста. Так как только браузеры на движке Webkit поддерживают свойство обведения текста, задаем сначала свойства для браузера Firefox:

h1::-moz-selection {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000,
         -1px 1px 0 #000, 1px 1px 0 #000;
  background: transparent;
}

После этого задаем особое свойство для браузеров Chrome, Safari и Opera:

h1::selection {
   text-shadow: none;
    -webkit-text-stroke: 1px #000;
  background: transparent;
}

И вот полученный результат. Выделите текст ниже, чтобы увидеть особый эффект выделения:

К сожалению, псевдоэлемент выделения работает в современных версиях браузера Internet Explorer, начиная от 9 версии, но при этом в нем не поддерживается свойство обведение текста, поэтому там выделенный текст станет полностью невидимым. Для решения этой проблемы нужен обходной путь, или можно использовать только обведение с помощью тени для всех браузеров.

Псевдоэлемент выделения можно объединить с псевдоклассом неактивного состояния окна, чтобы задавать, как выделенное содержимое должно выглядеть, когда окно браузера теряет фокус:

::selection:window-inactive {
  background:rgba(0,0,0,0.3);
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Классические типографские эффекты: цитата в автоматически добавляемых кавычках
• Создание анимированных подчеркиваний для ссылок
• Классические типографские эффекты с использованием CSS: первая строка вступления