demo · v144

Highlight Styling

Type a search term and step through matches. Pick a palette to see how ::search-text and ::search-text:current re-skin the find-in-page highlights. The DOM here simulates what Chrome 144 lets you express in pure CSS.

0 / 0

palette · all matches:

palette · current match:

The black cat watched a smaller cat ignore a cardboard box, then a third cat jumped from a high shelf and chased a stray bug across the floor. A fourth cat — old, dignified, half-asleep — declined to participate. Two cats by the window kept score.

the API

::search-text {
  background: gold;
  color: black;
}
::search-text:current {
  background: orange;
}

see also