• Chrome 144 recently shipped ::search-text , which is now one of several highlight-related pseudo-elements. • This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches are found. • By default, ::search-text matches are yellow while the current target (::search-text:current ) is orange, but ::search-text enables us to change that. • I’ll admit, I hadn’t really been following these highlight pseudo-elements. • Up until now, I didn’t even know that there was a name for them, but I’m glad there is because that makes it easier to round them all up and compare them, which is exactly what I’m going to do here today, as it’s not super obvious what they do based on the name of the pseudo-element. • I’ll also explain why we’re able to customize them, and suggest how.
Article Summaries:
- Chrome 144 has added the ::search‑text pseudo‑element, enabling developers to style the text highlighted by the browser’s find‑in‑page feature. It is part of a growing set of highlight pseudo‑elements-including ::target‑text, ::selection, ::highlight(), ::spelling‑error, and ::grammar‑error-that let designers adjust the appearance of automatically highlighted content. The article explains why such styling matters for accessibility and usability, and demonstrates a CSS trick that inverts the highlight color relative to the page background, ensuring sufficient contrast on any background.
Sources: