Highlighting a range of text inside a form field

2026-08-31

Title “Using the OpaqueRange API with the CSS Custom Highlight API” with parts of it highlighted in pink and green, the author’s photo, three code blocks, and “olliewilliams.xyz”.

Ollie Williams shows how the new OpaqueRange extends the CSS Custom Highlight API into form controls. Call createValueRange() on a <textarea> or on a text, password, search, tel, or url <input>, pass the result into a Highlight(), and register it with CSS.highlights.set(). In ::highlight() you get color, background-color, text-decoration, and text-shadow. Chromium 152 only for now.

olliewilliams.xyz/blog/opaquerange

Tags chrome js

August 27
What’s new in Chrome 152
Pseudo-element events, device performance tiers, connection allowlists, and relative alpha.
August 26
Balancing flex items with flex-wrap: balance
Five ways to avoid an orphaned item on the last flex line, from container queries to one property.
August 24
A look at the <geolocation> HTML element and how it works
Chrome 144 ships a permission-friendly element with autolocate, watch, and a :granted pseudo-class.
August 20
Field guide to the Chrome DevTools Performance panel
An interactive walkthrough of the waterfall, flame chart, LCP, CLS, INP, and the Insights panel.
August 12
How Baseline can help you ship less JavaScript
Five dependency clusters where platform features now replace npm packages.
August 11
Source maps or not?
When npm packages actually need them, and how much install size they cost.
July 29
What’s new in Chrome 151
Media capture element, declarative slot assignment, and soft-navigation metrics.
July 17
Do we still need build tools?
A look at which CSS and JS tooling still earns its place in 2026.