AutoGrow Textareas with CSS

By  on  

As the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our presentation layer, CSS, has done incredibly well in improving capabilities, even if sometimes too slow. The need for native support for automatically expanding textarea elements has been long known...and it's finally here!

To allow textarea elements to grow vertically and horizontally, add the field-sizing property with a value of content:

textarea {
  field-sizing: content; // default is `fixed`
}

The default value for field-sizing is fixed, signaling current behavior. The new behavior, content, will expand as much as possible. To constrain the size a textarea can grow, use traditional width/max-width and height/max-height properties.

Recent Features

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

Incredible Demos

  • By
    MooTools ContextMenu Plugin

    ContextMenu is a highly customizable, compact context menu script written with CSS, XHTML, and the MooTools JavaScript framework. ContextMenu allows you to offer stylish, functional context menus on your website. The XHTML Menu Use a list of menu items with one link per item. The...

  • By
    MooTools Typewriter Effect Plugin Upgrade

    Last week I shared my MooTools Typewriter Class with you. It was pretty well received and I got a few feature requests that I've implemented including "backspacing" and character variance delays. I'm not going to explain the old code, so click here...

Discussion

  1. Michael

    Sorry for asking, but is field-sizing: content; really finally there? At least on my Mac with Google Chrome 120.0.6099.129 in the DevTools it says “unkown property name”, same goes for Safari 16.2 (18614.3.7.1.5) and Firefox 112.0.2 (64-Bit).
    thanks Michael

  2. CSS working ⚒

  3. As of January 2024, this doesn’t work yet in any stable browser.

    Looking at the Chrome status for this feature, it appears that it won’t ship until Chrome 122. (At the time of this writing, latest Chrome is 120.)

    The web standards explainer doc for this gives more details.

  4. I needed to test with Ionic and it works perfectly post chrome 123. Works on android web view as well

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!