Ceci est assez proche de viable. Vous devez définir size="1" comme attribut dans <input> pour changer la taille vraiment petite. Le changement de taille est contrôlé par input:active qui annule la classe de base avec width: auto;. input:focus empêche d’être réduit lorsque vous le tabulez lorsque vous le tabulez.
Problèmes possibles: input:focus Force l’ID
à un min-size spécifique, qui peut être plus grand qu’il n’a été changé. Vous pouvez min-width: 100% Faites cette « caractéristique » au lieu d’un problème, donnant à l’utilisateur plus d’espace pour écrire. Si le <input> a mis l’accent, le changement de taille est toujours limité par min-width, mais le changement de taille est généralement effectué après la mise au point (et aussi, Il est utilisé principalement pour faire quelque chose de plus grand).
démonstration: http://jsfiddle.net/ThinkingStiff/jNnCW/
html (avec des styles en ligne à la demande):
<input type="text" size="1"/><style> input { resize: horizontal; width: 200px; } input:active { width: auto; } input:focus { min-width: 200px; }</style>