How to force free CSS resize on input element when its width is specified?

Question

I have simple problem - text input element which has specified 2 CSS attributes, see code below:

Answer 1

This is pretty close to workable. You need to set size="1" as an attribute on the to resize really small. The resize is controlled by input:active which overrides the base class with width: auto;. input:focus prevents it from shrinking when you tab into it to type.

Potential issues: input:focus forces the to a specific min-size, which might be larger than what it's been resized to. You could min-width: 100% to make this a "feature" instead of an issue, giving the user more space to type. If the has focus, resize is still limited by min-width, but resize is usually done post-focus (and also, mostly used to make something larger).

Demo: http://jsfiddle.net/ThinkingStiff/jNnCW/

HTML (with styles inline as you requested):