CSS ::search-text — кастомная подсветка поиска

Проблема с поиском по странице (Ctrl+F) знакома всем: браузеры накладывают своё стандартное выделение на найденный текст — в Chrome это жёлтое/оранжевое выделение и тёмно-серые буквы, малиновое в Firefox и т.д. Это может резать глаз или сливаться с градиентом и другим сложным фоном.

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

Спецификация: https://www.w3.org/TR/css-pseudo-4/

На текущий момент работает только в Chrome 144, который вышел в январе 2026. Смотрите поддержку на caniuse

::search-text {
  background: red;
  color: white;
}

Этот код подсветит все совпадения. Но в оригинале Chrome подсвечивал оранжевым текущий найденный элемент. Для этого потребуется псевдокласс :current

::search-text {
  background: red;
  color: white;

  &:current {
    background: darkred;
  }
}

В спецификации упоминаются псевдоклассы :past и :future. Они зарезервированы для подсветки предыдущих и следующих результатов в будущем.

/* Прошлые/будущие совпадения */
::search-text:past {
  opacity: 0.6;
}

::search-text:future {
  opacity: 0.3;
}

Количество свойств, которые можно стилизовать сильно ограничено. Цвет текста, цвет фона, text-decoration. На текущий момент фон градиентом работать отказался. Но поддерживаются кастомные свойства. А это дает хорошие возможности для изменения вида выделенного текста в зависимости от темы сайта или цветов блока.

Подбирайте цвета к своим блокам и темам:

:root {
  --search-text-color: #47293E;
  --search-text-bg: #D5BECA;
  --search-text-current-color: #D5BECA;
  --search-text-current-bg: #47293E;

  @media (prefers-color-scheme: dark) {
    --search-text-color: #a9d9e0;
    --search-text-bg: #4f6e8a;
    --search-text-current-color: #4f6e8a;
    --search-text-current-bg: #a9d9e0;
  }
}

::search-text {
  color: var(--search-text-color);
  background: var(--search-text-bg);

  &:current {
    color: var(--search-text-current-color);
    background: var(--search-text-current-bg);
  }
}