➡️ Open the demo ⬅️

🔗 Links:

• Explainer: aka.ms/opaque-range-explainer
• Demo: aka.ms/opaque-range-demo
• Feedback: aka.ms/opaque-range-feedback

OpaqueRange lets developers create live ranges over text inside <input> and <textarea> elements that automatically update as the user edits. These ranges support geometry methods like getBoundingClientRect() and the CSS Custom Highlight API, enabling use cases like caret-positioned popups and inline search highlighting directly on form controls, without cloning elements or exposing internal DOM structure.

• Caret popup positioning: Type : to trigger an emoji picker positioned at the caret.
• Search highlighting: All occurrences of a search term are highlighted in real time using the CSS Custom Highlight API.
• Live range tracking: Highlight "hello", then type before it and watch the highlight follow.
• Disconnecting a range: Call disconnect() to detach a range and observe offsets reset to 0.

To learn more, read the OpaqueRange explainer.

The feature is experimental and not yet enabled by default in Microsoft Edge's stable version.

To test the feature:

• Use Microsoft Edge version 148 or later, or another Chromium-based browser that matches this version.

• To test on your development machine:

  • Go to the about://flags page.
  • Enable the Experimental Web Platform features flag.
  • Restart the browser.

• To test in production, with your real users site, register for the origin trial:

  • Edge origin trial.
  • Chrome origin trial.

To give feedback on the feature, create a new issue.