Styling <input> and <textarea> to fit their values

Basically, it would be awesome if there was a way to specify behavior like http://leaverou.github.io/stretchy/ purely in CSS, with a rule like width: fit-value for <input>.

For <textarea>, this is a bit more complex: maybe <textarea> could have a rule like height: introduce-line(50%), which states the <textarea> should make room for one more line once its last line takes up more than 50% of the width. As for defining width, perhaps that could be something like width: fit-line(400px), which says "expand your width automatically, then start wrapping at 400px" (though I kind of feel textarea width should be fixed, and it should certainly be expanded as soon as text continues to multiple lines).

Ping @leaverou

Came across this the other day relating to a … but I just had a play in inspector and got no where on input fields… but might be worth looking at http://demosthenes.info/blog/662/Design-From-the-Inside-Out-With-CSS-MinContent

Relating to a… what?

Yeah, I’m aware of min-content - the problem with that, as I understand it, is that an <input>'s value is not considered content in the CSS model (hence these new properties). There’s also more to resizing than just fitting the value, as mentioned above with the height (and line-width) of <textarea>.

Sorry, relating to a fieldset, got converted to code. Yeah, realised it wasn’t a solve all (even if it worked on inputs), but thought it worth a mention.

I haven’t been able to track down which part of the specs say that textareas and input elements have to overflow instead of expanding.

All my expectations so far suggest textareas really should expand with their contents.

I wouldn’t even start thinking about more complex rules like “height of content, with half a line wide of padding at end of input” until it’s clear why a textarea don’t behave like a div, with respect to automatic sizing.

This is definitely not something we should need scripting to accomplish.