How to autogrow a textarea with CSS?

css, html

Solution

2020 Update - Using `contenteditable`

Because this answer still helps some folks from time to time, I felt like updating my answer with Chris Coiyer's latest finding.

Be warned, it is still not a CSS3 solution. But it's built-in the browser and recreates the OP's sought behavior.

Using `contenteditable` HTML attribute on a `<div />` will allow the user to edit the text content of a `div` and expand as the user breaks the line. Then, just deguise your `div` into a `<textarea />`.

<div 
  class="expandable-textarea"
  role="textbox"
  contenteditable
>
    Your default value
</div>

.expandable-textarea {
  border: 1px solid #ccc;
  font-family: inherit;
  font-size: inherit;
  padding: 1px 6px;

  display: block;
  width: 100%;
  overflow: hidden;
  resize: both;
  min-height: 40px;
  line-height: 20px;
}

The one caveat to this solution, is we're not using textareas. Bear in mind some of the features, such as placeholder, will require some creativity to be implemented using a `<div contenteditable />`

Source: The Great Chris Coiyer. Link to his blog

Original Answer: Workaround using a light-weight JS lib

Unfortunately, it seems that you cannot do this with only CSS3.

But, there's a 3.2k minified JS alternative to do so.

Here's the link including demo and usage.

You can install it by doing `npm install autosize` and using this way

autosize(document.querySelector('.yourTextAreaClass'));

Or jQuery style

autosize($('.yourTextAreaClass'));

And it works like a charm. It's lightweight and has a natural feel unlike many autoresize that are doing useless animations.

Problem

Given a textarea that starts off as a small box, single line, is it possible using CSS to automatically grow to have multiple lines as the user types multiple lines up until say a set limit (300px) when a scrollbar would appear with overflow auto with all the inputs?

Original source

Related problems