"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."
Chrome 144 introduces ::search-text for styling find-in-page matches, with ::search-text:current targeting the active match. Default styling uses yellow for matches and orange for the current target, but the pseudo-element allows customization. Other highlight pseudo-elements include ::target-text for text-fragment highlights, custom highlights via the JavaScript Custom Highlight API, and pseudo-elements for misspelled words and grammar in editable content. The HTML <mark> element also exists for manual highlighting in content. Customization improves accessibility by addressing color contrast and improves usability by adjusting emphasis and visibility against container backgrounds. Changing defaults may be necessary when default colors do not contrast with text or container backgrounds.
Read at CSS-Tricks
Unable to calculate read time
Collection
[
|
...
]