CSS find-in-page highlight pseudos

Category: CSS
Type: New or changed feature
Status: In developer trial (Behind a flag) (Chrome 144)
Intent stage: None

Summary

This feature exposes **find-in-page** search result styling to authors as a highlight pseudo-element, like selection and spelling errors. This allows authors to change the foreground and background colors or add text decorations, which can be especially useful if the browser defaults have insufficient contrast with the page colors or are otherwise unsuitable.

Motivation

Authors would like to customize the highlighted text from find-in-page to have a style consistent with that of the rest of the page. In particular, the existing find-in-page highlights may offer poor contrast, harming accessibility.

Standards & signals

Specification: https://drafts.csswg.org/css-pseudo-4/#selectordef-search-text
Firefox: Under consideration
Safari: No signal — Will file a request for position, but in spec conversations were neutral with no expectation of implementing it themselves.
Web developers: Positive — Developers wishing to avoid conflicts with the find-in-page colors and their page styles have requested this feature. On the original CSS WG issue someone wants this to avoid conflicts with the ECMAScript spec highlights. IN a discussion about find-in-page and accessibility, a "remaining challenge is "Styling Search Matches" https://schepp.dev/posts/rethinking-find-in-page-accessibility-making-hidden-text-work-for-everyone/#remaining-challenges A Mozilla user asks for the feature here: https://connect.mozilla.org/t5/ideas/increased-visibility-for-current-quot-find-in-page-quot-match/idi-p/26500 People have directly asked for CSS styling of find-in-page:https://stackoverflow.com/questions/50309703/css-for-browsers-find-in-page and https://stackoverflow.com/questions/18666075/how-to-style-detect-highlighted-boxes-generated-from-browser-native-search-in-pa, though each wants features that this proposal would not support (highlighting the entire line that is found, and providing info to JS). A developer wants to hide find-in-page results: https://stackoverflow.com/questions/77458310/confuse-browsers-in-built-find-in-page-feature) and could do so by styling them as transparent
Tracking bug: https://issues.chromium.org/issues/339298411

Docs: https://github.com/Igalia/explainers/blob/main/css/find-in-page/README.md

Explainers: https://github.com/Igalia/explainers/blob/main/css/find-in-page/README.md

View on chromestatus.com