v149 · Web APIs · DOM
CSS Highlight API Demo
OpaqueRange integrates with the CSS Custom Highlight API: you can create a Highlight from an OpaqueRange and style it with ::highlight(name). This lets you paint visual overlays on text inside a form control — search matches, grammar errors, inline suggestions — without any DOM manipulation.
Textarea — highlights painted via CSS Custom Highlight API
CSS.highlights registry
—
Active highlight ranges
0
How it works
1. textarea.createOpaqueRange(start, end) — creates an OpaqueRange for the character span.
2. new Highlight(opaqueRange) — wraps the range in a Highlight object.
3. CSS.highlights.set('name', highlight) — registers it under a name.
4. ::highlight(name) { background: yellow; } — CSS paints the overlay without touching the DOM.
see also
- OpaqueRange Demo — basic geometry overlay
- Range Operations — all OpaqueRange methods
- Autocomplete Overlay — anchor dropdown to caret
- Multiline Geometry — per-line getClientRects