demo · v144
Current vs Rest
The win nobody talks about: ::search-text:current. Browsers have always drawn the active find-in-page match in a different colour, but authors couldn't. Customise both the inactive matches and the current one, then trigger ctrl-F to test the contrast.
::search-text pseudo: checking…
Browsers ship a default highlight for the find-in-page search bar: a yellow background on every match, with a darker tint on whichever one the user is currently looking at. The colour palette has stayed roughly the same since Internet Explorer 5.
The problem is when a page uses yellow as a brand colour, or when the page background is dark. The default highlight has no contrast: dark text on dark yellow, white text on yellow, yellow-on-yellow.
The new CSS pseudo-elements expose the highlight to the cascade. ::search-text selects every match. ::search-text:current selects the active one — the one keyboard arrows step through.
Both pseudos respect the normal cascade. Specificity, !important, custom properties — everything works. You can theme them per element, per dark mode, per print stylesheet.
Test it. Open the find bar, type "search", arrow through the results. The current match swaps colour; every other match keeps the inactive style.
One of those small platform additions that quietly closes a long-standing accessibility gap.
the API
::search-text { background: #fff3a3; color: #3a2900; }
::search-text:current { background: #0a2bff; color: #fff; }