Как оформить выделение текста на сайте через CSS ::selection

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

::selection выбирает ту часть текста документа, которую пользователь сейчас выделил: например, протянул указатель мыши по абзацу или выбрал текст с клавиатуры. Это временное состояние, оно не меняет сам текст, его HTML-разметку и шрифт. После снятия выделения обычное оформление возвращается. Поэтому правило отвечает только за вид подсветки, а не за то, что происходит при копировании или поиске.

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

Самая безопасная настройка — не переопределять выделение без конкретной причины. Пользователи привыкли к системному оттенку, а операционная система или браузер могут подстраивать его под выбранную тему и специальные настройки. Слишком яркая брендовая заливка способна сделать выбранные буквы менее различимыми, особенно если цвет текста наследуется от разных вложенных элементов.

Кастомный стиль оправдан, когда стандартная подсветка почти сливается с фоном страницы или конфликтует с цветом основного текста. Например, на кремовой странице сайта библиотеки светло-жёлтое системное выделение может быть малозаметно. Достаточно задать однотонный фон и явный цвет текста, сохранив чёткую границу между выбранным фрагментом и остальной строкой.

Для статьи, блога или справки обычно лучше ограничивать стиль областью чтения. Глобальное правило влияет также на навигацию, форму поиска, подписи и футер; там может быть другой фон и контраст. Класс на контейнере позволяет проверить и настроить именно текстовую колонку. Не сужайте правило до каждого отдельного абзаца без причины: дополнительные селекторы усложняют каскад и мешают единообразию.

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

Ниже базовое правило для области статьи. Оно задаёт фон и цвет текста только во время выбора, не меняя постоянную палитру контента.

CSS для вставки в таблицу стилей:

.article-body::selection {
color: #ffffff;
background-color: #514078;
}

.article-body a::selection {
color: #ffffff;
background-color: #514078;
}

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

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

Состояние выделения легко пропустить при обычном просмотре сайта, поэтому проверяйте его как отдельное текстовое сочетание: цвет символов поверх цвета подсветки. Для обычного текста ориентир WCAG 2.2 AA — контраст не ниже 4,5:1; для крупного текста — 3:1. Эти значения относятся к представленному тексту и его фону. Если вы задаёте свои цвета выделения, выберите пару, которая сохраняет читаемость и при таком визуальном состоянии, а не только в покое.

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

Автоматический анализатор цветового контраста полезен для проверки выбранной пары, но он не заменяет просмотр реального взаимодействия. Примените CSS, выделите текст в целевом браузере, проверьте наведённые и фокусные состояния рядом с выделением, а затем снимите его. Обычные ссылки должны оставаться различимыми и без опоры только на цвет; собственная подсветка не должна скрывать их структуру.

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

Не ставьте user-select: none на основной текст статьи ради аккуратного вида или чтобы «не мешали» случайные выделения. Такое ограничение мешает копировать цитаты, адреса и справочную информацию, пользоваться переводчиком, поиском и вспомогательными инструментами. Оно уместно лишь для небольших элементов управления, где выделение мешает самому действию, например для декоративного значка рядом с кнопкой, но даже там не убирайте выделение с текста команды без необходимости.

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

Зафиксируйте, зачем меняется системная подсветка: стандартный цвет сливается с фоном, мешает брендовому цвету текста или выбранное оформление должно быть согласовано с темой сайта. Проверьте, что проблема есть у читателя, а не только в макете. Выберите контейнер основной статьи как область первого теста, чтобы не менять всё содержимое сайта одним правилом.

Укажите и цвет фона, и цвет текста. Если менять только background-color, браузер может оставить унаследованный цвет букв, который с новой подложкой окажется слабоконтрастным. Если менять только color, текст станет нечитаемым на системном фоне. Один вариант пары должен проходить проверку во всех предусмотренных темах и для ссылок.

На опубликованной или тестовой странице выделите обычный абзац, заголовок, ссылку, жирный текст и диапазон через несколько элементов. Затем повторите действия клавиатурой и на телефоне. Сравните результат в браузерах, которые важны аудитории проекта, и в тёмном режиме. Проверьте, что снять выделение просто и что после обновления страницы не изменились сами цвета текста.

Посмотрите другую страницу, где используется тот же компонент: длинное руководство, карточка статьи, блок комментариев. Если правило сделало там подписи или ссылки нечитаемыми, сузьте селектор или скорректируйте цвета. После проверки сохраните короткую заметку о назначении правила, используемой паре и темах, на которых оно проверено, чтобы следующий автор темы не заменил один оттенок без повторной проверки.

Да. Добавьте ::selection к классу контейнера чтения, например .article-body::selection, и проверьте, что область охватывает основной текст и ссылки. Локальный селектор ограничивает влияние правила. В других блоках страницы останется системный стиль, если для них не задано отдельное оформление.

Поддержка ограничена свойствами оформления текста и подсветки, например color, background-color, text-decoration и text-shadow. На фоновую картинку или произвольное свойство не стоит рассчитывать. Перед публикацией проверьте актуальную документацию MDN и совместимость нужных браузеров.

Да, задайте оба цвета, если переопределяете подсветку. Цвет букв может наследоваться от ссылки, заголовка или компонента и стать незаметным на новой заливке. Проверьте контраст фактической пары на обычном тексте, ссылках и заголовках.

Обычно нет. Запрет через user-select: none мешает копированию, цитированию, поиску и вспомогательным средствам. Ограничение разумно только для небольших интерактивных элементов, если выделение действительно мешает действию; основной текст и содержимое справки должны оставаться доступными для выбора.

Ссылка может иметь собственный цвет, фон или вложенные элементы, а псевдоэлементы подсветки используют специальное наследование. Проверьте ссылку отдельно и, если требуется, задайте явную пару цветов для её выбранного фрагмента. Не скрывайте при этом сам текст ссылки или её смысл.

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

Проверяйте контраст цвета выбранных букв и цвета фона подсветки, а затем выделите реальные фрагменты в браузере. Для обычного текста WCAG 2.2 AA задаёт минимум 4,5:1, для крупного текста — 3:1. Повторите проверку для ссылок, длинных строк и каждой темы сайта.

Веб-статье обычно подходит системное выделение браузера: оно привычно и оставляет читателю контроль над отображением. Если цвет действительно нужно изменить, задайте явную пару фона и текста, ограничьте её контентной областью и испытайте на ссылках, разных темах и устройствах. Для собственной типографики и проверки начертания можно воспользоваться инструментами Fontgenerator, а затем оценить шрифт в реальном тексте страницы.

Технические ограничения псевдоэлемента и рекомендации по сохранению читаемости сверяйте с первичной документацией: MDN, «::selection CSS pseudo-element» — https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/%3A%3Aselection; W3C, «Understanding WCAG 2.2, Success Criterion 1.4.3: Contrast (Minimum)» — https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.