The CSS ::search-text pseudo-element selects matching textual content out of your browser’s “discover in web page” characteristic. For instance, when you 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 type 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 type the match that’s at present in focus.
You’ll be able to “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 */;
coloration: black;
}
::search-text:present {
background: oklch(62% 0.22 38) /* pink */;
coloration: white;
}The CSS ::search-text pseudo-element is outlined within the CSS Pseudo-Components Module Degree 4 specification.
Syntax
Fairly simple! Declare the pseudo-element and add your type guidelines:
::search-text{
/* ... */
} Utilization
It’s sometimes declared by itself (::search-text), however may be appended to particular parts as effectively:
/* All textual content */
::search-text {}
html::search-text {} /* sort of redundant */
/* Particular aspect */
part::search-text {}
robust::search-text {}We’re just a little restricted so far as what CSS properties we are able to declare in ::search-text. Here’s what it helps:
And, sure, we are able to use it with customized properties, like:
:root {
--color-blueberry: oklch(0.5458 0.1568 241.39);
}
::search-text {
background-color: var(--color-blueberry);
}Fundamental utilization
With the ::search-text pseudo-element, we are able to type the matching textual content outcomes from “Discover in web page”. Plus, if we need to type the at present targeted matching textual content, then we connect the :present pseudo-class after ::search-text.
/* matches all searched textual content */
::search-text {
coloration: inexperienced;
background-color: white;
}
/* matches any header stage 1 searched textual content */
h1::search-text {
text-shadow: 12px 1px lightgrey;
background-color: black;
coloration: white;
}
/* the present searched header stage 1 textual content */
h1::search-text:present {
coloration: pink;
background: white;
}Inheritance chain
All descendants all the time inherit kinds utilized by the spotlight pseudo-elements. This manner, particular person properties set on highlights will cascade to all parts 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.
We have now an
and ::search-text in
with the next CSS, which might apply to all parts in
:
article::search-text {
background: gold;
coloration: black;
text-decoration: underline;
}Then, override the coloration property for less than and its descendants:
p::search-text {
coloration: orange;
}And do the identical for text-decoration on the aspect:
robust::search-text {
text-decoration: line-through;
}While you seek for “lorem”, the background of the primary occasion (inside however exterior ) will inherit each the background and text-decoration values from
coloration 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
coloration and background values are inherited immediately 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 parts are additionally individually inherited and overridden.
Focusing on a textual content
Within the demo beneath, we set text-decoration to underline to provide any searched textual content a blue underline. This manner, we are able to customise matching textual content whereas additionally leaving the default background coloration, which prevents folks from getting confused about what’s happening.
::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 are able to type the at present targeted match. For instance, beneath we apply a light-weight orange hue textual content ornament coloration with 0.3em thickness to the at present 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 not less than 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 needs to 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 typically complicated. My private recommendation is to stay to solely text-decoration and its related properties since they’re extra refined than the remainder.
There’s additionally :previous and :future
The :previous and :future pseudo-classes are purported to match the aspect solely prior and completely after a :present aspect, respectively.
Nonetheless, the specification says:
The
:previousand:futurepseudo-classes are reserved for analogous use sooner or later. Any unsupported mixture of those pseudo-classes with::search-texthave to be handled as invalid
Which means, you may’t use :previous, :future or every other pseudo-class with the ::search-text pseudo-element. In case your browser by some means 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 Degree 4 specification. That is nonetheless being examined and improved upon.
Browser help
Very extensive help:
