It is possible to expand a textarea only with CSS?

I have a textarea with 200px of height, but when I pass that 200px with text I want to have the textarea expanded instead of keeping the 200px of height with a scroll bar.

It is possible to do that only with CSS?

Solution 1:

Instead of textarea , you can use div with contentEditable attribute:

div {
  display: inline-block;
  border: solid 1px #000;
  min-height: 200px;
  width: 300px;
}

<div contentEditable="true"></div>

DEMO

Solution 2:

It is possible to make a textarea expandable by the user, using just CSS. In fact, in some modern browsers, such expandability is even the browser default. You can explicitly ask for it:

textarea { resize: both; }

Browser support is growing but is still limited.

There is typically just a small hint about resizability: a resize handle in the lower right corner. And I’m afraid most users won’t understand this hint.

You cannot make a textarea expand automatically by content using just CSS.

Solution 3:

No it is not possible to do only with css, but you could use jquery:

$('#your_textarea').on('keydown', function(e){
    var that = $(this);
    if (that.scrollTop()) {
        $(this).height(function(i,h){
            return h + 20;
        });
    }
});