Published: Mar 20, 2025
When you want to allow the user to enter plaintext information, your first instinct might be to reach for a <textarea>. This works for many cases and requires no special effort to make it work with forms, but also has limitations.
One example is growing the <textarea> dynamically with the content without resolving to hacks. There's field-sizing: content, but it has limited browser support. This is where the contenteditable="plaintext-only" attribute value combination comes in. You can add it to generic elements like <div>, and have the element automatically take care of resizing.
Another limitation is styling. The CSS Custom Highlight API provides a mechanism for styling arbitrary text ranges on a document by using JavaScript to create the ranges, and CSS to style them. A <textarea> internally uses a <div> in the user agent shadow root, which is why styling the text with the CSS Custom Highlight API doesn't work. If used on an element like a <div> directly that you have made contenteditable, the CSS Custom Highlight API works just fine.
<style>
::highlight(highlight) {
background-color: yellow;
color: black;
}
</style>
<div contenteditable="plaintext-only">Edit me</div>
<script>
const parentNode = document.querySelector('div').firstChild;
const range = new Range();
range.setStart(parentNode, 0);
range.setEnd(parentNode, 3);
const highlight = new Highlight(range);
CSS.highlights.set('highlight', highlight);
</script>
Here's a screenshot of the demo that shows this limitation. Note how the text in the <textarea> isn't styled, but the text in the two contenteditable generic <div> elements is.
