Chrome 144 has introduced the `::search-text` pseudo-element, which highlights text found during a page search using `Ctrl`/`Command` + `F`. By default, `::search-text` matches are yellow and the current target (`::search-text:current`) is orange, but these can be customized.
Highlight pseudo-elements are not widely known, but understanding them allows for better customization. This article explores different highlight pseudo-elements and their uses, including why customization is important for accessibility and usability.
### Types of Highlight Pseudo-Elements
| Pseudo-selector | Selects… | Notes |
|————————–|——————————-|———————————————————————-|
| `::search-text` | Find-in-page matches | `::search-text:current` selects the current target |
| `::target-text` | Text fragments | Allows programmatic highlighting via URL parameters |
| `::selection` | Text highlighted with pointer | |
| `::highlight()` | Custom highlights | Defined by JavaScript’s Custom Highlight API |
| `::spelling-error` | Incorrectly spelled words | Applies to editable content only |
| `::grammar-error` | Incorrect grammar | Applies to editable content only |
The `` HTML element is also relevant for highlighting.
### Customizing Highlight Pseudo-Elements
Default styling might not provide sufficient contrast or emphasis. Customizing highlights improves accessibility and usability. Using relative color syntax, you can adapt highlights to background changes:
“`css
body {
–background: #38003c;
background: var(–background);
mark,
::selection,
::target-text,
::search-text {
color: var(–background);
background: rgb(from var(–background) calc(255 – r) calc(255 – g) calc(255 – b));
}
}
“`
This method inverts the container’s background color for highlights, ensuring contrast. However, browser support might vary.
### Ensuring Accessibility
Highlight text color matches the container’s background, creating contrast. Inverting colors can be unpredictable, so manual color selection may be necessary. Highlight pseudo-elements should be visually distinct to avoid confusion when overlapping.
“`css
body {
–background: #38003c;
background: var(–background);
mark,
::selection,
::target-text,
::search-text {
color: var(–background);
}
mark {
background: rgb(from var(–background) calc(255 – r) calc(255 – g) calc(255 – b) / 70%);
}
::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%);
&:current {
background: rgb(from var(–background) calc(255 – r) calc(255 – g) b / 100%);
}
}
}
“`
`::spelling-error` and `::grammar-error` have their own visual indicators and are not included in these customizations. Highlight pseudo-elements should remain visually distinctive and accessible. Testing is essential to ensure color contrast, and future CSS features like `contrast-color()` may provide better solutions.
