Стилизация результатов Ctrl+F с помощью ::search-text

Долгие годы стилизовать подсветку результатов поиска по странице с помощью CSS было попросту невозможно. Браузер полностью владел этим элементом интерфейса. Можно было настроить ::selection для текста, выделенного мышью, но как только пользователь нажимал Ctrl+F, ваша таблица стилей теряла всякое влияние. Ситуация начинает меняться — по крайней мере, в браузерах на основе Chromium.

Псевдоэлемент ::search-text — это новая экспериментальная возможность CSS, позволяющая стилизовать подсветку, создаваемую встроенной функцией поиска по странице. Разберём, что он делает, как работает и чего от него реально стоит ожидать сегодня.

Что на самом деле делает ::search-text

Когда пользователь нажимает Ctrl+F (или Cmd+F в macOS) и вводит запрос, браузер подсвечивает совпадающий текст на странице. Исторически эта подсветка отрисовывалась полностью на уровне user-agent браузера — вне досягаемости каких-либо авторских стилей.

::search-text — это псевдоэлемент-подсветка CSS, относящийся к тому же семейству, что и ::selection, ::target-text и ::spelling-error. Он нацеливается на фрагменты текста, которые браузер помечает во время сеанса поиска по странице, давая вам возможность применить собственные стили.

Базовое использование

Синтаксис прост:

::search-text {
  background-color: oklch(85% 0.2 90);
  color: black;
}

Также можно нацелиться на текущее активное совпадение — то, на котором браузер сфокусирован при переходе между результатами — с помощью состояния :current:

::search-text:current {
  background-color: oklch(70% 0.25 60);
  color: white;
}

Это различие важно для UX. Без :current все совпадения выглядят одинаково. С ним вы можете визуально отделить активный результат от остальных — именно так браузеры стилизуют его по умолчанию.

Какие стили реально поддерживаются

::search-text следует тем же ограничениям, что и другие псевдоэлементы-подсветки CSS. Вы ограничены конкретным подмножеством свойств, связанных с отрисовкой:

• color
• background-color
• text-decoration (и связанные подсвойства)
• text-shadow

Свойства компоновки, такие как padding, margin, border или font-size, не оказывают никакого влияния. Слой подсветки отрисовывается поверх существующего контента — он не вызывает перерасчёта компоновки.

Чем это отличается от CSS Custom Highlight API

Стоит прояснить различие, поскольку оба механизма связаны с псевдоэлементами-подсветками CSS.

CSS Custom Highlight API позволяет определять собственные именованные подсветки через JavaScript с помощью объектов Range и CSS.highlights.set(). Затем вы стилизуете их через ::highlight(your-name). Это мощный инструмент, но он требует JavaScript, и вы сами контролируете, какой текст подсвечивается.

::search-text устроен иначе: браузер контролирует, что именно подсвечивается (всё, что соответствует запросу поиска по странице), а вы контролируете только визуальный стиль. Никакого JavaScript не требуется. Знать содержимое поискового запроса не нужно.

Поддержка браузерами: экспериментально и только Chromium

Это самое важное при принятии решений для production. По состоянию на начало 2026 года ::search-text доступен только в браузерах на основе Chromium начиная с версии 144 — Chrome и Edge на десктопе. Firefox и Safari пока не поддерживают эту возможность. Отслеживать текущий статус поддержки можно на Can I use.

Относитесь к этому как к прогрессивному улучшению. Браузеры без поддержки ::search-text просто проигнорируют правило и применят стандартную подсветку. Это нормально — функция корректно деградирует.

/* Применяется только в поддерживающих Chromium-браузерах */
::search-text {
  background-color: #ffe066;
  color: #111;
}

::search-text:current {
  background-color: #f5a623;
  color: white;
}

Запросы поддержки вроде @supports selector(::search-text) не обязательны для безопасного фолбэка, но могут быть полезны, если вы хотите ограничить область применения стилей или явнее обозначить наличие поддержки.

Стоит добавить уже сейчас

::search-text сегодня не заменит стандартное поведение браузера для большинства пользователей. Но для команд, создающих тщательно проработанные читательские интерфейсы — сайты документации, контентоёмкие приложения, дизайн-системы — это малозатратный способ без JavaScript привести подсветку поиска по странице в соответствие с вашим визуальным языком, по крайней мере для пользователей современных браузеров на Chromium.

Добавьте его в свою таблицу стилей, сочетайте с :current для выделения активного совпадения и следите за поддержкой в Firefox и Safari по мере развития спецификации.

Заключение

Псевдоэлемент ::search-text закрывает небольшой, но давно существовавший пробел в CSS, позволяя авторам стилизовать результаты поиска по странице. Хотя поддержка пока ограничена браузерами Chromium, API прост, не требует JavaScript и аккуратно деградирует в неподдерживаемых средах. Для сайтов, где важен опыт чтения, это простое дополнение, приближающее нативный интерфейс браузера к вашей дизайн-системе.

Часто задаваемые вопросы

Нужен ли feature query вроде @supports для безопасного использования ::search-text?

Нет. Браузеры, которые не распознают ::search-text, молча проигнорируют правило и применят стандартную подсветку поиска по странице. Стили можно добавить прямо в таблицу стилей без обёртки @supports. Тем не менее, если вы хотите применить принципиально иные fallback-стили, feature query всё же может пригодиться для ясности.

Может ли ::search-text полностью переопределить стандартные цвета совпадений браузера?

Да, в рамках поддерживаемого набора свойств. Установка background-color и color у ::search-text заменяет стандартный вид подсветки в поддерживающих Chromium-браузерах. Однако нельзя изменить размер, позицию или компоновку подсветки, поскольку применяются только свойства, связанные с отрисовкой. Браузер по-прежнему контролирует, какие диапазоны текста подсвечиваются.

Работает ли ::search-text внутри Shadow DOM или iframe?

Каждый документ или shadow tree рассматривайте отдельно. Для iframe стили должны быть добавлены внутри документа iframe; CSS родительской страницы не пересекает границы фрейма. Для Shadow DOM детали поддержки стоит проверить в ваших целевых браузерах, поэтому не полагайтесь на это поведение для критически важного UX.

Можно ли определить из JavaScript, что пользователь запустил поиск по странице?

Нет. Интерфейс поиска по странице полностью контролируется браузером, и не существует стандартизированного события или API, раскрывающего активность поиска для скриптов. ::search-text даёт вам только контроль над стилизацией получаемой подсветки. Если вам нужно программное поведение поиска, подходящей альтернативой будет CSS Custom Highlight API в сочетании с собственным полем ввода.