Стилизация результатов 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 и аккуратно деградирует в неподдерживаемых средах. Для сайтов, где важен опыт чтения, это простое дополнение, приближающее нативный интерфейс браузера к вашей дизайн-системе.

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

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..