← Blog

field-sizing grows a textarea for you

A comment box that gets taller as you type has needed a script for as long as I can remember. It's one line of CSS now.

Every site with a comment box on it ends up wanting the box to grow as somebody types.

The usual way is a bit of script. Listen for typing, set the height to nothing, measure how tall the writing wants to be, then set the height to that. The zeroing is the bit people miss, and without it the box can only ever get bigger. With the awkward cases handled it comes to about fifteen lines, and it's on thousands of sites.

The fix...

textarea { field-sizing: content; }

The box now sizes itself to whatever is in it. It works on inputs and selects too.

Give it a min-height and a max-height as well, or it starts one line tall and grows off the bottom of the screen.

Firefox was the last to pick it up, in June, so all four browsers have it. That's another script I can delete.

If any of it is useful on your project, say so.