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

Breaking change: No
Enterprise impact: Low
Chromium flag: Experimental Web Platform Features
Spec maturity: Working draft
Web Platform Tests: No

WPT details: Testing is in wpt_internal tests due to a lack of wpt support for adding find-in-page markers. third_party/blink/web_tests/wpt_internal/css/css-pseudo/search-text-*

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

Ecosystem

Web Platform Tests: https://wpt.fyi/results/?q=css-find-in-page-highlight-pseudos
Chrome Platform Showcase: https://chrome-platform-showcase.paulkinlan-ea.deno.net/features
GenDN reference: https://gendn.paulkinlan-ea.deno.net/features
chrome.dev demos search: https://www.google.com/search?q=site%3Achrome.dev+CSS%20find-in-page%20highlight%20pseudos
MDN Web Docs: https://developer.mozilla.org/en-US/search?q=CSS%20find-in-page%20highlight%20pseudos
Baseline status: https://webstatus.dev/?q=CSS%20find-in-page%20highlight%20pseudos

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