The colored highlights that appear when you search or select text on a webpage no longer have to be browser defaults. With the official support of ::search-text in Chrome 144 and other pseudo-elements like ::selection and ::target-text, you can now take full CSS control. This guide clearly distinguishes what each element selects and introduces practical styling techniques with accessibility and usability in mind. You can find more details in the source material.
Highlight Pseudo-Elements Comparison Table
A quick comparison table helps clarify the role of each pseudo-element.
| Pseudo-selector | Selects… | Notes |
|---|---|---|
::search-text | Find-in-page matches | ::search-text:current selects the current target |
::target-text | Text fragment highlights | Often triggered by links from search engines |
::selection | Pointer-selected text | |
::highlight() | Custom highlights defined by JavaScript API | |
::spelling-error | Spelling errors (underlines) | Mainly for editable content |
::grammar-error | Grammar errors (underlines) | Mainly for editable content |
In Practice: Flexible Styling with Relative Color Syntax
If the default yellow highlight lacks contrast against your page background, you can use Relative Color Syntax to create highlights that react to the background color. The key is inverting the RGB channel values to guarantee strong contrast.
body {
--background: #38003c;
background: var(--background);
}
::selection,
::target-text,
::search-text {
/* Match text color to the background */
color: var(--background);
/* Invert the background color by subtracting each RGB channel from 255 */
background: rgb(from var(--background) calc(255 - r) calc(255 - g) calc(255 - b));
}
/* Visually distinguish each highlight type (keeping one RGB channel) */
::selection {
background: rgb(from var(--background) r calc(255 - g) calc(255 - b) / 70%);
}
::target-text {
background: rgb(from var(--background) calc(255 - r) g calc(255 - b) / 70%);
}
::search-text {
background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 70%);
}
::search-text:current {
background: rgb(from var(--background) calc(255 - r) calc(255 - g) b / 100%);
}
In this code, r, g, b represent the RGB channel values of the --background color. The calc(255 - r) formula inverts the color, and the opacity (/ 70%) allows overlaps to remain distinguishable.
Key Insights and Considerations
The need for this styling isn't just about aesthetics—it's about ensuring accessibility (color contrast) and usability (emphasis). Highlights like ::search-text and ::target-text represent information the user actively sought, so they must be visually prominent.
One important caveat: a fully inverted color doesn't always guarantee good contrast. For example, gray (#808080) inverts to the same gray. So while we look forward to future CSS features like color-contrast(), it's crucial to always test thoroughly with color contrast checking tools today.
Highlights sometimes need to functionally 'clash' rather than blend harmoniously into the design palette. Their primary job is to capture the user's attention and convey accurate information. Starting with the new ::search-text, mastering these browser-provided selectors is a step towards designing better user experiences.