CSS ::search-text and :current playground

Explore ::search-text with controls for find-in-page matches and use :current to distinguish the active result.

Presets

Choose a configuration as a starting point, then adjust any control.

Selector::search-text can be used across the whole page with ::search-text or inside a specific selector, for example .search-text ::search-text. Only background-color, color, text-decoration, and text-shadow can be changed. Other properties do not apply to this highlight.

Selector scope

MatchesThese styles apply to every result that matches the text found by the browser.

Background color

Text color

Text decoration

Text-shadow color

Current match:current distinguishes the active match with ::search-text:current while users move through results.

Background color

Text color

Text decoration

Text-shadow color

Open Find in page — Ctrl+F / ⌘F and search for “highlight”.

Editorial demo

Use find in page to highlight repeated words in an article.

Scope

A specific selector can highlight only this block, while the global selector acts across the whole page.

HTML

<p>Open Find in page — Ctrl+F / ⌘F and search for “highlight”.</p>

<section class="search-text">
  <div>
    <h2>Editorial demo</h2>
    <p>Use find in page to highlight repeated words in an article.</p>
  </div>

  <div>
    <h2>Scope</h2>
    <p>A scoped selector targets this block, while the global selector can style every search match on the page.</p>
  </div>
</section>

Tailwind CSS

Some classes with arbitrary values can be replaced by native classes, depending on the value and your Tailwind CSS configuration.

<p>Open Find in page — Ctrl+F / ⌘F and search for “highlight”.</p>

<section class="[&_::search-text]:bg-[#d9fff0] [&_::search-text]:text-[#18352b] [&_::search-text]:underline [&_::search-text]:text-shadow-[0_0_3px_#8ee9c0] [&_::search-text:current]:bg-[#ffcf5a] [&_::search-text:current]:text-[#231500] [&_::search-text:current]:underline [&_::search-text:current]:decoration-wavy [&_::search-text:current]:text-shadow-[0_0_7px_#ff8a00]">
  <div>
    <h2>Editorial demo</h2>
    <p>Use find in page to highlight repeated words in an article.</p>
  </div>

  <div>
    <h2>Scope</h2>
    <p>A scoped selector targets this block, while the global selector can style every search match on the page.</p>
  </div>
</section>

CSS

.search-text ::search-text {
  background-color: #d9fff0;
  color: #18352b;
  text-decoration: underline;
  text-shadow: 0 0 3px #8ee9c0;
}

.search-text ::search-text:current {
  background-color: #ffcf5a;
  color: #231500;
  text-decoration: underline wavy;
  text-shadow: 0 0 7px #ff8a00;
}

.search-text {
  & ::search-text {
    background-color: #d9fff0;
    color: #18352b;
    text-decoration: underline;
    text-shadow: 0 0 3px #8ee9c0;
  
    &:current {
      background-color: #ffcf5a;
      color: #231500;
      text-decoration: underline wavy;
      text-shadow: 0 0 7px #ff8a00;
    }
  }
}