v135 · css

CSS find-in-page highlight pseudos

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

concepts

  1. Style your find-in-page

    Three preset styles for the new ::search-text pseudo plus the :current active-match selector — amber default, soft highlighter, boxed underline.

  2. Dark-mode find

    The accessibility argument from the explainer: browser-default yellow over a dark theme is washed out. With ::search-text scoped under prefers-color-scheme: dark, the highlight respects the palette.

  3. Search pseudo theme designer

    Five colour pickers wire up to ::search-text and ::search-text:current live — trigger find-in-page on the sample paragraph and see your custom theme applied to the browser’s native highlight in real time.

  4. Highlight Theme Gallery

    Browse 8 pre-built ::highlight(find-in-page) themes: high contrast, dark-mode adaptive, underline-only, brand blue, amber, emerald, and box outline. Select a theme and use Ctrl+F to see it applied live.

  5. Code search styling

    Syntax-highlighted code blocks have a specific problem: the browser's default yellow find-in-page highlight disappears over colored tokens. This demo applies ::search-text scoped per theme — vivid amber on light, pink overlay on dark, warm ochre on solarized. Includes an in-page JS search simulator.

why it shipped

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.

references