The CSS ::search-text pseudo-element selects matching text from your browser’s “find in page” feature. For example, if you use your browser search to find “search-text” on a page, all instances of it will highlight. This pseudo-element lets you style the appearance of that highlight.

If there are multiple matches on the page, ::search-text can be used with the :current pseudo-class to style the match that’s currently in focus.

You can trigger “find in page” using Ctrl + F (Windows) or ⌘F (Mac).

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

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

The CSS ::search-text pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 specification.

Syntax

Declare the pseudo-element and add your style rules:

<element-selector>::search-text {
  /* ... */
}

Usage

It’s typically declared by itself (::search-text), but can be appended to specific elements as well:

/* All text */
::search-text {}
html::search-text {} /* kind of redundant */
/* Specific element */
section::search-text {}
strong::search-text {}

The supported CSS properties within ::search-text are limited to:

Custom properties can be used like this:

:root {
  --color-blueberry: oklch(0.5458 0.1568 241.39);
}
::search-text {
  background-color: var(--color-blueberry);
}

Basic Usage

With the ::search-text pseudo-element, you can style matching text results from “Find in page”. To style the currently focused match, attach the :current pseudo-class after ::search-text.

/* matches all searched text */
::search-text {
  color: green;
  background-color: white;
}
/* matches any h1 searched text */
h1::search-text {
  text-shadow: 12px 1px lightgrey;
  background-color: black;
  color: white;
}
/* the current searched h1 text */
h1::search-text:current {
  color: red;
  background: white;
}

Inheritance Chain

All descendants always inherit styles applied through the highlight pseudo-elements, so individual properties set on highlights cascade to all elements down the tree. Take the following HTML:

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

Here, an <article> container has two children: <h2> and <p>, the latter having a <strong> descendant. Styling ::search-text on <article> applies to all elements within it:

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

You can then override color for only <p> and its descendants:

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

And override text-decoration on the <strong> element:

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

When you search for “lorem”, the instance inside <p> but outside <strong> will inherit both the background and text-decoration values from <article>, while overriding the color value with orange. The <strong> element’s “lorem” text inherits color and background from its parent <p> and grandparent <article>, while overriding text-decoration with line-through.

The key takeaway is that properties for highlight elements are individually inherited and overridden along the chain.

Targeting Text

Setting text-decoration to underline gives any searched text a blue underline, customizing matching text while preserving the default background color — which avoids confusing users about the browser’s built-in highlight behavior.

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

Using :current

Combining ::search-text with :current lets you style the currently focused match. The example below applies a light orange text decoration with 0.3em thickness to the active result:

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

Accessibility Notes

For WCAG contrast standards, you need a contrast ratio of at least 4.5:1 between text and background. It’s also advisable not to change the search colors too drastically. This feature should be used sparingly, as heavy customization may cause issues for users with cognitive disabilities and can be confusing since “find in page” is a core browser function. Sticking to text-decoration and its associated properties is a safer choice, as they are more subtle than color changes.

There’s Also :past and :future

The :past and :future pseudo-classes are intended to match elements entirely before and entirely after a :current element, respectively. However, the specification states:

The :past and :future pseudo-classes are reserved for analogous use in the future. Any unsupported combination of these pseudo-classes with ::search-text must be treated as invalid.

This means you cannot use :past, :future, or any other pseudo-class with the ::search-text pseudo-element. If your browser appears to support them, report the unexpected behavior by opening an issue with the browser vendor.

Specification

The CSS ::search-text pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 specification and is still being refined. Browser support is currently wide for the related highlight pseudo-element functionality, though implementations of ::search-text specifically should be verified against current browser release notes.