Table of Contents

CSS `::search-text` Pseudo-Element: Style Your Browser’s Find-in-Page Highlights

Have you ever wondered if you could control how highlighted text looks when a visitor uses their browser’s built-in “Find in Page” feature? With the CSS ::search-text pseudo-element, you now can.

This relatively new CSS feature gives developers fine-grained control over the appearance of search matches — including the ability to style the currently active match differently from the rest.

What Is the `::search-text` Pseudo-Element?

The ::search-text pseudo-element targets text that matches a user’s browser search query — the kind triggered by pressing Ctrl + F on Windows or ⌘F on Mac.

By default, browsers apply their own highlight styles to these matches. With ::search-text, you can override those defaults and apply your own colors, text decorations, and more.

It is defined in the CSS Pseudo-Elements Module Level 4 specification and is currently being tested and refined across browsers.

Basic Syntax

Using ::search-text is straightforward. Simply declare it and add your style rules:

::search-text {
  background: oklch(87% 0.17 90); /* yellow */
  color: black;
}

You can also scope it to specific elements:

/* Applies to all matched text on the page */
::search-text {}

/* Applies only to matched text inside <section> elements */
section::search-text {}

/* Applies only to matched text inside <strong> elements */
strong::search-text {}

Styling the Currently Focused Match with `:current`

Here is where things get really useful. When there are multiple search matches on a page, only one is “in focus” at a time — the one the browser is actively highlighting as you cycle through results.

You can style that focused match differently using the :current pseudo-class combined with ::search-text:

/* All matched text */
::search-text {
  background: oklch(87% 0.17 90); /* yellow */
  color: black;
}

/* Currently focused match */
::search-text:current {
  background: oklch(62% 0.22 38); /* red */
  color: white;
}

This makes it easy for users to track which result they are currently viewing, especially on content-heavy pages.

What CSS Properties Can You Use?

The ::search-text pseudo-element does not support every CSS property. Here is what is currently allowed:

background-color
color
text-decoration and its associated properties:
- text-decoration-color
- text-decoration-line (only grammar-error, spelling-error, line-through, none, and underline values)
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-thickness
- text-underline-position
- text-underline-offset
text-shadow
CSS custom properties

You can also use CSS custom properties (variables) for cleaner, more maintainable code:

:root {
  --color-blueberry: oklch(0.5458 0.1568 241.39);
}

::search-text {
  background-color: var(--color-blueberry);
}

Scoping Styles to Specific Elements

One powerful use case is applying different highlight styles depending on what element the matched text lives inside. For example:

/* Default style for all matched text */
::search-text {
  color: green;
  background-color: white;
}

/* Matched text inside an h1 */
h1::search-text {
  text-shadow: 12px 1px lightgrey;
  background-color: black;
  color: white;
}

/* Currently focused match inside an h1 */
h1::search-text:current {
  color: red;
  background: white;
}

This level of granularity lets you create rich, context-aware highlight experiences without disrupting the rest of your design.

How Inheritance Works with `::search-text`

Highlight pseudo-elements like ::search-text follow a special inheritance model. Styles cascade down through the DOM tree, meaning a style applied to a parent element’s ::search-text will be inherited by its children — unless overridden.

Consider this HTML structure:

<article>
  <h2>Highlight inheritance demo</h2>
  <p>Lorem ipsum dolor sit amet. <strong>Lorem</strong> appears again here.</p>
</article>

You could apply a base style to the <article> container, then override specific properties for child elements:

article::search-text {
  background: gold;
  color: black;
  text-decoration: underline;
}

p::search-text {
  color: orange;
}

strong::search-text {
  text-decoration: line-through;
}

In this example, matched text inside <p> inherits the gold background and underline from <article>, but displays in orange instead of black. Matched text inside <strong> further overrides the text decoration to show a strikethrough, while keeping the other inherited values.

A Subtle Approach: Using Text Decoration Only

Rather than replacing the browser’s default background highlight entirely, a more subtle and user-friendly approach is to layer on a custom text decoration while leaving the background intact:

::search-text {
  text-decoration: underline;
  text-decoration-color: oklch(65% 0.18 240);
  text-decoration-thickness: 0.22em;
  text-underline-offset: 0.15em;
}

This adds a distinctive blue underline to matched text without confusing users who expect the standard browser highlight behavior.

Combining `::search-text` with `:current` for Underline Styles

You can extend the subtle underline approach to also differentiate the active match:

::search-text:current {
  text-decoration-color: oklch(85% 0.22 38);
  text-decoration-thickness: 0.3em;
}

This gives the currently focused result a thicker, warmer-colored underline — making it visually distinct without jarring the user.

What About `:past` and `:future`?

You may come across references to the :past and :future pseudo-classes, which are intended to match elements before and after a :current element. However, the CSS specification explicitly states that these are reserved for future use and must be treated as invalid when combined with ::search-text.

In short: do not use :past or :future with ::search-text yet. If a browser appears to support this combination, it should be considered a bug worth reporting.

Accessibility Considerations

When customizing search highlight styles, accessibility must stay top of mind. Here are the key points to keep in mind:

Maintain sufficient contrast. WCAG requires a contrast ratio of at least 4.5:1 between text and its background to meet AA standards.
Do not over-style. The browser’s find-in-page feature is a familiar, core UI pattern. Changing it too dramatically can confuse users, particularly those with cognitive disabilities.
Use subtle enhancements. Sticking to text-decoration properties is often the safest approach — it adds a visual cue without completely replacing expected browser behavior.

Browser Support

Browser support for ::search-text is growing, though it is still part of an evolving specification. Since it is defined in the CSS Pseudo-Elements Module Level 4 — which is still being actively developed — you should test across browsers before deploying this in production and consider it a progressive enhancement.

Treat it as a layer of polish: if a browser does not support it, users simply see the default browser highlight. No harm done.

Quick Reference: Key Takeaways

::search-text styles text highlighted by the browser’s Find in Page feature.
Combine it with :current to style the currently focused match differently.
Only a limited set of CSS properties are supported: color, background-color, text-decoration and related properties, text-shadow, and custom properties.
Styles cascade down the DOM tree through the highlight inheritance model.
Use it as progressive enhancement and always keep accessibility in mind.
Avoid :past and :future — they are not yet supported with this pseudo-element.

CSS keeps evolving, and tools like ::search-text are a great reminder of just how much control developers now have over even the smallest UI details. If you want to stay on top of the latest CSS techniques, productivity tips, and developer tools, head over to myproductivetools.com — your go-to resource for working smarter and building better.

CSS ::search-text Pseudo-Element: Style Your Browser’s Find-in-Page Highlights

What Is the ::search-text Pseudo-Element?