::search-text

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 this page, all instances of it will highlight. This pseudo-element lets us style the appearance of that highlight. And a bonus! If there are multiple matches on the page, then ::search-text can be used with the :current pseudo-class to style the match that’s currently in focus. You can “find in page” using the CTRL + F (for Windows) or "⌘F" (for Mac) keyboard shortcuts. ::search-text { background: oklch(87% 0.17 90) /* yellow */; color: black; } ::search-text:current { background: oklch(62% 0.22 38) /* red */; color: white; } CodePen Embed Fallback The CSS ::search-text pseudo-element is defined in the CSS Pseudo-Elements Module Level 4 specification . Syntax Pretty straightforward! Declare the pseudo-element and add your style rules: ::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 {} We’re a little limited as far as what CSS properties we can declare in ::search-text . Here is what it supports: background-color color text-decoration and its associated properties ( text-underline-position and text-underline-offset ), as well as its associated constituent properties: text-decoration-color text-decoration-line : But only the grammar-error , spelling-error , line-through , none , and underline values. text-decoration-skip-ink text-decoration-style text-decoration-thickness text-shadow Custom properties And, yes, we can use it with custom properties , like: :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, we can style the matching text re