The CSS ::search-text pseudo-element selects matching textual content out of your browser’s “discover in web page” characteristic. For instance, for those who use your browser search to seek out “search-text” on this web page, all cases of it’s going to spotlight. This pseudo-element lets us model the looks of that spotlight.
And a bonus! If there are a number of matches on the web page, then ::search-text can be utilized with the :present pseudo-class to model the match that’s at the moment in focus.
You may “discover in web page” utilizing the CTRL + F (for Home windows) or "⌘F" (for Mac) keyboard shortcuts.
::search-text {
background: oklch(87% 0.17 90) /* yellow */;
shade: black;
}
::search-text:present {
background: oklch(62% 0.22 38) /* pink */;
shade: white;
}The CSS ::search-text pseudo-element is outlined within the CSS Pseudo-Components Module Stage 4 specification.
Syntax
Fairly simple! Declare the pseudo-element and add your model guidelines:
::search-text{
/* ... */
} Utilization
It’s sometimes declared by itself (::search-text), however could be appended to particular components as nicely:
/* All textual content */
::search-text {}
html::search-text {} /* form of redundant */
/* Particular component */
part::search-text {}
robust::search-text {}We’re a little bit restricted so far as what CSS properties we will declare in ::search-text. Here’s what it helps:
And, sure, we will use it with customized properties, like:
:root {
--color-blueberry: oklch(0.5458 0.1568 241.39);
}
::search-text {
background-color: var(--color-blueberry);
}Primary utilization
With the ::search-text pseudo-element, we will model the matching textual content outcomes from “Discover in web page”. Plus, if we wish to model the at the moment targeted matching textual content, then we connect the :present pseudo-class after ::search-text.
/* matches all searched textual content */
::search-text {
shade: inexperienced;
background-color: white;
}
/* matches any header degree 1 searched textual content */
h1::search-text {
text-shadow: 12px 1px lightgrey;
background-color: black;
shade: white;
}
/* the present searched header degree 1 textual content */
h1::search-text:present {
shade: pink;
background: white;
}Inheritance chain
All descendants all the time inherit types utilized by the spotlight pseudo-elements. This fashion, particular person properties set on highlights will cascade to all components down the three. Take for instance the next HTML:
Spotlight inheritance demo
Lorem ipsum dolor sit amet. Lorem seems once more right here. One other lorem seems right here.
Now we have an
and ::search-text in
with the next CSS, which might apply to all components in
:
article::search-text {
background: gold;
shade: black;
text-decoration: underline;
}Then, override the shade property for less than and its descendants:
p::search-text {
shade: orange;
}And do the identical for text-decoration on the component:
robust::search-text {
text-decoration: line-through;
}If you seek for “lorem”, the background of the primary occasion (inside however outdoors ) will inherit each the background and text-decoration values from
shade worth with its personal orange.
Onto ‘s “lorem” textual content, it’s going to inherit the properties we set in its father or mother and grandparent
shade and background values are inherited instantly from its father or mother, and since they haven’t been overridden, they keep. Whereas we override the text-decoration worth to line-through.The important thing takeaway from this instance is that properties for spotlight components are additionally individually inherited and overridden.
Focusing on a textual content
Within the demo under, we set text-decoration to underline to present any searched textual content a blue underline. This fashion, we will customise matching textual content whereas additionally leaving the default background shade, which prevents folks from getting confused about what’s occurring.
::search-text {
text-decoration: underline;
text-decoration-color: oklch(65% 0.18 240);
text-decoration-thickness: 0.22em;
text-underline-offset: 0.15em;
}Utilizing :present
Utilizing ::search-text with :present, we will model the at the moment targeted match. For instance, under we apply a lightweight orange hue textual content ornament shade with 0.3em thickness to the at the moment matched searched textual content:
::search-text:present {
text-decoration-color: oklch(85% 0.22 38);
text-decoration-thickness: 0.3em;
}Some accessibility notes
For WCAG’s distinction requirements, you want a distinction ratio of at the very least 4.5:1 between the textual content and background. One other piece of recommendation is to not change the search colours an excessive amount of. In reality, this characteristic must be used sparingly since it might trigger points for customers with cognitive points, and as a core a part of the browser, it may be usually complicated. My private recommendation is to stay to solely text-decoration and its related properties since they’re extra delicate than the remainder.
There’s additionally :previous and :future
The :previous and :future pseudo-classes are imagined to match the component solely prior and completely after a :present component, respectively.
Nevertheless, the specification says:
The
:previousand:futurepseudo-classes are reserved for analogous use sooner or later. Any unsupported mixture of those pseudo-classes with::search-textshould be handled as invalid
Which means, you may’t use :previous, :future or another pseudo-class with the ::search-text pseudo-element. In case your browser one way or the other works with them, kindly report the sudden habits by opening a difficulty with them.
Specification
The CSS ::search-text pseudo-element is outlined within the CSS Pseudo-Components Module Stage 4 specification. That is nonetheless being examined and improved upon.
Browser help
Very extensive help:
