CSS-псевдоэлемент `::search-text`

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

Попробуйте

p::search-text {
  color: crimson;
  background-color: wheat;
}

<p>
  Using your browser's "Find in page" functionality, find a word or phrase that
  appears in this sentence, and note how, in supporting browsers, each result is
  highlighted using the specified custom styles.
</p>

Синтаксис

::search-text {
  /* ... */
}

Описание

В большинстве браузеров есть та или иная функция поиска текста на странице, обычно называемая «Найти» или «Найти на странице». Псевдоэлемент ::search-text — один из псевдоэлементов подсветки — позволяет применить к результатам, выделенным функцией поиска браузера, ограниченный набор стилей.

Не все браузеры и их версии подсвечивают результаты поиска на странице с помощью подсветки, которую можно стилизовать с помощью CSS. В таких случаях ::search-text может быть не реализован или просто проигнорирован.

Использование ::search-text в качестве самостоятельного селектора применяет стили к результатам поиска браузера, расположенным где угодно на странице. Если нужно стилизовать только результаты поиска браузера, расположенные внутри определённых элементов, можно объединить ::search-text с другими селекторами, например section::search-text.

Кроме того, ::search-text можно объединить с :current псевдоклассом, чтобы задать особые стили для текущего найденного результата, например:

p::search-text {
  color: white;
  background-color: purple;
}

p::search-text:current {
  background-color: crimson;
}

Модель наследования

Псевдоэлемент ::search-text использует особую модель наследования, общую для всех псевдоэлементов подсветки: стили наследуются как от родительских элементов, так и от псевдоэлементов этих родителей. Подробнее о работе этой модели наследования см. в разделе Наследование псевдоэлементов подсветки.

Допустимые свойства

С ::search-text можно использовать ограниченное подмножество свойств CSS:

• color
• background-color
• Сокращённое свойство text-decoration и соответствующие ему развёрнутые свойства:
  • text-decoration-line: только значения grammar-error, spelling-error, line-through, none и underline.
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration-skip-ink
• text-underline-offset
• text-shadow

Доступность

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

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

Примеры

Пользовательские стили для результатов текстового поиска

В этом примере показано, как использовать ::search-text и :current для создания пользовательских стилей результатов поиска «Найти на странице» в браузере.

HTML

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

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec finibus est
  eget eros congue pellentesque. Etiam a augue accumsan, scelerisque nisl sit
  amet, lobortis nulla. Aliquam condimentum eu orci eu elementum. Donec
  porttitor quam et posuere commodo. Mauris rhoncus diam a scelerisque molestie.
  Integer sollicitudin risus dui, ut sagittis lorem laoreet eget. Duis eget
  pretium enim. Morbi tristique, diam sit amet gravida finibus, metus ex
  tincidunt nibh, ac volutpat urna purus et arcu. Donec risus risus, semper vel
  purus sit amet, gravida vestibulum est. Sed et tristique urna. Nam vel mi eget
  nisi consectetur elementum. Aenean faucibus aliquam cursus. Morbi posuere
  tincidunt velit, et sagittis quam sagittis in. Nam eget ante ultrices, auctor
  dui vel, euismod lacus. Vivamus tincidunt, sem ac sodales aliquet, tortor
  tortor consequat diam, nec tempor mi dui vel eros. Aliquam ac erat et metus
  egestas scelerisque.
</p>

CSS

В CSS мы сначала задаём стили для псевдоэлемента ::search-text. Мы задаём ему пользовательские стили background-color, color и text-shadow.

html {
  font-family: "Helvetica", "Arial";
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
  width: 90%;
  margin: 0 auto;
}
@layer no-support {
  body::before {
    background-color: wheat;
    display: block;
    text-align: center;
    padding: 1em 0;
  }
  @supports not selector(:current) {
    body::before {
      content: "Your browser doesn't support the :current pseudo-class.";
    }
  }
  @supports not selector(::search-text) {
    body::before {
      content: "Your browser doesn't support the ::search-text pseudo-element.";
    }
  }
}

::search-text {
  background-color: purple;
  color: white;
  text-shadow: 1px 1px 1px black;
}

Наконец, мы задаём стили для текущего найденного результата с помощью ::search-text:current, назначая ему другое background-color и стили text-decoration, чтобы он отличался от остальных результатов.

::search-text:current {
  background-color: crimson;
  text-decoration-line: underline;
  text-decoration-color: yellow;
  text-decoration-thickness: 3px;
}

Результат

Пример отображается следующим образом:

Попробуйте воспользоваться функцией поиска на странице в браузере, чтобы найти слово, которое встречается в тексте примера несколько раз, например «aliquam», «amet» или «tortor». Переключайтесь между предыдущим и следующим результатами, чтобы посмотреть, как оформлен :current.

Спецификации

Совместимость с браузерами

См. также

• :current
• Псевдоэлементы подсветки
• Модуль псевдоэлементов CSS