CSS rule to auto-resize textarea upon text

Question

Let's suppose I have a textarea. I would like to resize the height of the textarea automatically each time its value/text is changed. It can be done with Javascript, but I am interested to know whether there is a pure HTML/CSS solution.

Can you tell me why? I guess this could be transformed into an accepted answer. — Lajos Arpad, Jul 13 '15 at 13:42
The reason being, interaction can be captured only by JavaScript. — Praveen Kumar Purushothaman, Jul 13 '15 at 13:43
The referred question was about purely doing it with CSS. My question was about HTML and CSS, not only CSS. — Lajos Arpad, Jul 13 '15 at 13:43

score 1 · Accepted Answer · answered Jul 13 '15 at 13:45

This cannot be done using pure CSS at least for <textarea>, the reason being, interaction can be captured only by JavaScript. But you can make something like <div> having a contenteditable, a fake <textarea> can be made possible.

Snippet

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

<div contentEditable></div>

CSS rule to auto-resize textarea upon text

1 Answers1