Isto é bastante próximo a viable. Debe configurar size="1" como atributo en <input> para cambiar o tamaño realmente pequeno. O cambio de tamaño está controlado por input:active que cancela a clase base con width: auto;. input:focus Evita que se reduza cando o tabule.
Posibles problemas: input:focus obriga ao <input> a min-size específico, que pode ser maior do que se cambiou. Pode min-width: 100% fan que esta sexa unha “característica” no canto dun problema, dando ao usuario máis espazo para escribir. Se o <input> ten foco, o cambio de tamaño aínda está limitado por min-width, pero o cambio de tamaño normalmente realízase despois do foco (e tamén, Utilízase principalmente para facer algo maior).
Demostración: http://jsfiddle.net/ThinkingStiff/jNnCW/
HTML (con estilos en liña como se solicitou):
<input type="text" size="1"/><style> input { resize: horizontal; width: 200px; } input:active { width: auto; } input:focus { min-width: 200px; }</style>