CSS - any way to make a textarea or input box elastic?

Question

I found many javascript plugins to make a textarea or input box elastic but what i'm wondering is:

is it possible to make something like this http://unwrongest.com/projects/elastic/ in pure css?

Answer 1

Answer is no, you cannot accomplish that using pure CSS, you cannot calculate how many letters did the user typed, what's the height of the textarea and how much you should increase proportionally while the user is typing.

So that's best suited if you use jQuery or JavaScript and increase the height on onkeyup or onchange event.

The very best in least JavaScript you can get is this

---

Or transit the element on focus if you don't want to throw the big box on load...

textarea {
   height: 100px;
   width: 300px;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   transition: all .5s;
   /* Used transition just to animate the resize, if not 
      required can be removed */
}

textarea:focus {
    height: 300px;
    width: 500px;
}

Demo

---

As you requested for minimal JavaScript to be used.. you can refer Rob's solution here

var textarea = document.getElementById("textarea");
var heightLimit = 200; /* Maximum height: 200px */

textarea.oninput = function() {
  textarea.style.height = ""; /* Reset the height*/
  textarea.style.height = Math.min(textarea.scrollHeight, heightLimit) + "px";
};

^{Credits for code - Rob W}

Demo

Answer 2

Quite simply, it is not possible using pure CSS and a textarea. However, you can use an editable div to do that. Here is an example of what you could do that creates a textarea like box that expands as the user types.

<div id="editable" contenteditable></div>
<style>
div#editable{
    min-height: 2em;
    height: auto;
    width: 200px;
    border: 1px solid #999;
}
div#editable:focus {
    border: 1px solid #000;
}
</style>