demo · v135
Search pseudo theme designer
Pick colours for ::search-text and ::search-text:current, then trigger Find-in-page (Ctrl/⌘+F) on the sample paragraph to see your theme applied to the browser's native search highlighter. The pseudos are the first time a page can override Chrome's default yellow.
::search-text: ?
Open Find-in-page with Ctrl/⌘ + F and search for "chrome" or "highlight" inside the preview to see the theme.
Chrome 135 introduces highlight pseudos that finally let CSS style the find-in-page UI.
For years the highlight was a hard-coded yellow box. Now the page can theme it, dim it
for accessibility, or emphasise the current match with its own outline. Dark-mode pages
can finally stop fighting the highlight. Try searching for the word "highlight" inside
this paragraph.
generated CSS