By default, <input> and <textarea> elements don't change size based on the content they contain. In fact, there isn't any simple HTML or CSS way to make them do that. Kinda funny, as that seems like a reasonable use-case. But of course, there are ways, my friend. There are always ways.

I was thinking about this after Remy Sharp blogged about it recently in the context of inline <input> elements.

Non-input elements expand naturally

It's weird to me that there is no way to force an input element to mimic this behavior, but alas.

We can make any element editable and input-like with the contenteditable attribute:

<span 
  class="input" 
  role="textbox" 
  contenteditable>
    99
</span>

That <span> will naturally grow to be the width it needs to be for the content it contains. If it was a <div> or any other element that is block-level, it would also expand vertically as needed.

But are non-input elements accessible?

I'm not entirely sure. Notice I put role="textbox" on the element. That's just a best-guess based on some docs.

Even if that's helpful...

1. What about the fact that forms can be submitted with the Enter key?
2. What about the idea that form data is often serialized and sent along, while the code that's doing it probably isn't looking for a span?
3. Does it actually read the same as an input in a screen reader?
4. What other things¹ do inputs naturally do that I'm not thinking of?

As attracted as I am to the idea that we can get auto-resizing for free from the browser by using non-input elements, I'm also a little worried about (my) unknown usability and accessibility risk.

Resizing actual input elements

So let's say we stick with <input> and <textarea>. Can we make them resize-able even though it's not particularly natural?

One idea I had is to wrap the input in a relative inline parent and absolutely position it inside. Then, with JavaScript, we could sync the input value with a hidden span inside that wrapper, pushing the width wider as needed.

For textareas, one classic technique is to count the number of line-breaks, use that to set the height, then multiply it by the line-height. That works great for preformatted text, like code, but not at all for long-form paragraph-like content.

Here are all these ideas combined.

Other ideas

Shaw has a little JavaScript one-liner that is very clever. The JavaScript sets a data-* attribute on the element equal to the value of the input. The input is set within a CSS grid, where that grid is a pseudo-element that uses that data-* attribute as its content. That content is what stretches the grid to the appropriate size based on the input value.

Your ideas

I absolutely know that you fellow web nerds have solved this six ways to Sunday. Let's see 'em in the comments.

The post Auto-Growing Inputs & Textareas appeared first on CSS-Tricks.