CSS ::search-text Pseudo-Element

CSS ::search-text Pseudo-Element

The ::search-text pseudo-element styles text matches identified by a browser's Find in Page feature. It allows developers to customize the appearance of highlighted search results, including their text color, background color, and the currently focused match.

Syntax

selector::search-text {
  property: value;
}

The selector identifies the element whose browser search matches should receive the styling.

The ::search-text pseudo-element represents text highlighted by the browser's Find in Page feature.

For example:

p::search-text {
  color: #fff;
  background-color: #0066cc;
}

This rule styles browser search matches inside paragraphs with white text and a blue background.

To target matches throughout the document, omit the element selector:

::search-text {
  color: #fff;
  background-color: #0066cc;
}

The pseudo-element does not accept arguments.

It uses two colons and does not require parentheses.

Note: The styling applies only when the browser supports ::search-text and exposes its search highlights to CSS.

How It Works

The ::search-text pseudo-element is part of the CSS highlight pseudo-element family.

It represents text identified by the browser's built-in Find in Page functionality.

When a user searches for a word or phrase, the browser locates matching text within the document.

In supporting browsers, CSS can customize the appearance of those matches.

The process involves four steps:

1. The user opens the browser's Find in Page feature.
2. The user enters a word or phrase.
3. The browser identifies matching text within the page.
4. The ::search-text styling applies to the highlighted matches.

The browser controls which text matches the search query.

CSS controls the appearance of those matches but does not perform the search itself.

The ::search-text pseudo-element does not insert new content or modify the original text.

It also does not create a search box or replace the browser's search interface.

Browser Find in Page

Most desktop browsers provide a Find in Page feature that searches the text of the current webpage.

On Windows, press Ctrl + F to open the browser's search interface.

On macOS, press Command + F.

For example, consider this paragraph:

<p>CSS controls colors, fonts, spacing, and layout. CSS makes webpages easier to style.</p>

If the user searches for CSS, the browser identifies the matching occurrences.

In a supporting browser, the following CSS can customize their appearance:

p::search-text {
  background-color: #ffeb99;
  color: #333;
}

The matching text receives a light yellow background and dark text.

The browser may also distinguish the currently focused search result from other matches.

That distinction can be styled using ::search-text:current.

Styling Search Matches

The ::search-text pseudo-element supports a limited set of CSS properties for highlighting text.

For example:

::search-text {
  color: #222;
  background-color: #ffeb99;
}

This rule applies dark text and a light yellow background to browser search matches.

You can also apply text decorations:

::search-text {
  color: #222;
  background-color: #ffeb99;
  text-decoration-line: underline;
  text-decoration-color: #0066cc;
  text-decoration-thickness: 2px;
}

The underline provides an additional visual indication of the highlighted text.

Text shadows are also supported:

::search-text {
  color: #fff;
  background-color: #0066cc;
  text-shadow: 1px 1px 1px #333;
}

These declarations affect the highlighted text without changing the layout of the surrounding content.

Properties such as padding, margin, width, and height cannot be used to change the layout of search highlights.

Styling the Current Match

When a browser finds multiple matches, one match can be the currently focused search result.

The :current pseudo-class can be combined with ::search-text to style that result separately.

For example:

::search-text {
  color: #222;
  background-color: #ffeb99;
}
::search-text:current {
  color: #fff;
  background-color: #0066cc;
}

Other search matches appear with a light yellow background.

The currently focused match appears with a blue background and white text.

Additional decoration can make the focused match easier to identify:

::search-text:current {
  color: #fff;
  background-color: #0066cc;
  text-decoration-line: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 2px;
}

The browser updates the current match as the user moves between search results.

JavaScript is not required to manage this state.

The :current pseudo-class used here is different from the :target-current pseudo-class used for scroll marker navigation.

The correct selector for the currently focused browser search match is ::search-text:current.

Targeting Specific Elements

The ::search-text pseudo-element can be combined with ordinary CSS selectors to limit where custom highlighting applies.

For example:

article::search-text {
  color: #222;
  background-color: #ffeb99;
}

This rule targets browser search matches within an <article> element.

To style matches inside a particular section:

.documentation::search-text {
  color: #fff;
  background-color: #0066cc;
}

This applies custom highlighting to matches inside elements with the documentation class.

Different areas of a page can use different highlight styles:

header::search-text {
  color: #fff;
  background-color: #0066cc;
}
main::search-text {
  color: #222;
  background-color: #ffeb99;
}

The browser still searches according to its normal Find in Page behavior.

These selectors only change the appearance of matches in the selected elements.

Example

The following example demonstrates custom styling for browser search matches and the currently focused result.

HTML:

<div class="search-text-demo">
  <p>CSS controls the appearance of webpages.</p>
  <p>CSS provides colors, fonts, and spacing.</p>
  <p>HTML defines structure, while CSS controls presentation.</p>
</div>

CSS:

.search-text-demo::search-text {
  color: #222;
  background-color: #ffeb99;
}
.search-text-demo::search-text:current {
  color: #fff;
  background-color: #0066cc;
  text-decoration-line: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 2px;
}

Try it: Press Ctrl + F on Windows or Command + F on macOS and search for CSS.

In supporting browsers, matching text inside the example receives a light yellow background.

When the currently focused match is inside the example, it receives a blue background with white underlined text.

Use the browser's next and previous search controls to move between matches.

Because Find in Page searches the webpage rather than only this example, it may also find occurrences of CSS elsewhere on the page.

In browsers without ::search-text support, the browser's normal search highlighting remains in effect.

The result cannot display the custom highlighting until a browser search is active.

::search-text vs. ::selection

The ::search-text and ::selection pseudo-elements both style highlighted text, but they represent different types of highlighting.

For example:

::search-text {
  background-color: #ffeb99;
  color: #222;
}
::selection {
  background-color: #0066cc;
  color: #fff;
}

The first rule styles browser search matches.

The second rule styles text selected by the user.

Both pseudo-elements can be used on the same webpage.

Supported CSS Properties

The ::search-text pseudo-element supports a limited set of properties for changing the appearance of highlighted text.

For example:

::search-text {
  color: #222;
  background-color: #ffeb99;
  text-decoration-line: underline;
  text-decoration-color: #0066cc;
  text-decoration-thickness: 2px;
}

Properties that change box layout, such as display, padding, and margin, are not applicable to this highlight pseudo-element.

Highlight Inheritance

The ::search-text pseudo-element uses the special inheritance model defined for CSS highlight pseudo-elements.

Highlight styling can inherit from both the originating element and highlight pseudo-elements associated with ancestor elements.

For example:

article::search-text {
  color: #222;
  background-color: #ffeb99;
}
article p::search-text {
  background-color: #cce5ff;
}

The paragraph search highlights use the light blue background declared by the more specific rule.

Other search highlights inside the article can use the light yellow background.

The paragraph highlights can inherit applicable highlight styling, including the text color, from the ancestor highlight.

This behavior differs from the inheritance of ordinary pseudo-elements such as ::before and ::after.

When using multiple highlight rules, consider both CSS specificity and highlight inheritance.

Limitations

The ::search-text pseudo-element has several limitations.

• It is an experimental feature with limited browser availability.
• Its implementation is optional under the CSS specification.
• It only applies to text matches identified by the browser's Find in Page feature.
• It does not create a search interface or perform text searches.
• It supports only a limited set of CSS properties.
• It cannot change the size, spacing, or layout of highlighted text.
• The browser controls which search result is currently focused.
• Unsupported browsers retain their own search highlighting behavior.

Use ::search-text as a progressive enhancement rather than a required part of the page's functionality.

Do not rely on custom search highlight colors to communicate information that would otherwise be unavailable.

Accessibility Considerations

Browser search highlighting helps users locate text within a webpage.

Customizing that highlighting should make search results easier to recognize without reducing readability.

Follow these accessibility practices:

• Maintain sufficient contrast between highlighted text and its background.
• Make the currently focused match visually distinguishable from other matches.
• Do not rely on color alone to identify the focused match.
• Avoid text shadows or decorations that make letters difficult to read.
• Preserve the browser's normal Find in Page functionality.
• Test custom highlighting in light and dark color schemes.
• Ensure search results remain readable at different zoom levels.
• Test the experience in the browsers you support.

For example, combine a background color change with an underline for the focused match:

::search-text:current {
  color: #fff;
  background-color: #0066cc;
  text-decoration-line: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 2px;
}

This provides more than one visual indication of the currently focused search result.

Custom search highlighting should improve usability rather than replace familiar browser behavior unnecessarily.

Browser Support

The ::search-text pseudo-element has limited browser availability and is not considered a widely supported CSS feature.

Support was introduced in Chrome 144 and Edge 144. Firefox does not currently support the feature, and support in other browsers varies.

The CSS specification allows browsers to omit support when their Find in Page highlighting cannot be represented using CSS highlight pseudo-elements.

Unsupported browsers continue using their normal search result highlighting.

A feature query can be used to apply custom search highlighting only when the selector is recognized:

@supports selector(::search-text) {
  ::search-text {
    color: #222;
    background-color: #ffeb99;
  }
}

The :current selector can be checked separately when styling the focused search result:

@supports selector(::search-text:current) {
  ::search-text:current {
    color: #fff;
    background-color: #0066cc;
  }
}

For current compatibility information, visit Can I Use? and search for ::search-text.

Also consult MDN for implementation details and browser compatibility updates.

Specifications

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

The specification describes ::search-text as a highlight pseudo-element representing text identified by the browser's Find in Page functionality.

It also defines the use of :current for identifying the currently focused search match.

Related highlight pseudo-elements include ::selection, ::target-text, ::spelling-error, ::grammar-error, and ::highlight().