Is it possible to autosize or autogrow for input text and textarea using CSS only?

James Padolsey's and ahaxe's jquery scripts are two very good instances on autogrowing form fields.

Likewise, autosize can be accomplished in a number of ways using Javascript.

But, just wondering, is there anyway to do any kind of autosize or autogrow with CSS only? I don't know CSS deep enough, so you know, with all those pseudo-classes and CSS3, I'd guess this might be possible.

Or ma开发者_JS百科ybe the only option would be using either <input size> or style="width: em;"...

No, you can't. Really. It can only be done using JavaScript.

Use contenteditable attribute on an element and then customize it as you like in the css:

<div contenteditable="true"></div> 

You can turn a div-element to contentEditable. It will behave the same way as the textarea, but the benefit is that you only need to use CSS instead of various plugins.

$(<selector>).attr(contentEditable, 'true');

In CSS you set min-height, max-height, even -webkit-transition property works for animation I think. Don't forget to set word-wrap property to break-word, so the words remains in the element.