Això és bastant proper a viable. Ha d’establir size="1" com un atribut a <input> per canviar la mida realment petit. El canvi de mida està controlat per input:active que anul·la la classe base amb width: auto;. input:focus evita que es redueixi quan ho tabula per escriure.
Possibles problemes: input:focus obliga a l’<input> a un min-size específic, que pot ser més gran del que s’ha canviat de mida. Pot min-width: 100% fer d’això una “característica” en lloc d’un problema, donant a l’usuari més espai per escriure. Si el <input> té focus, el canvi de mida encara està limitat per min-width, però el canvi de mida generalment es realitza després de l’enfocament ( i també, s’usa principalment per a fer alguna cosa més gran).
Demostració: http://jsfiddle.net/ThinkingStiff/jNnCW/
HTML (amb estils en línia com va sol·licitar) :
<input type="text" size="1"/><style> input { resize: horizontal; width: 200px; } input:active { width: auto; } input:focus { min-width: 200px; }</style>