Cómo forzar el cambio de tamaño de CSS en el elemento de entrada cuando se especifica su ancho?

Question

tengo sencillo problema - elemento de entrada de texto que ha especificado atributos CSS 2, ver código de abajo:

<input type="text" style="resize:horizontal; width:200px" /> 

Cuando sólo se especifica resize atributo, el input puede ser redimensionado a cualquier ancho. Sin embargo, si tengo width especificado, el elemento input puede cambiar de tamaño solo más ancho que 200px, no más corto.

¿Hay alguna manera de cómo se puede especificar el ancho predeterminado y al mismo tiempo tener un elemento de entrada de tamaño variable? ¿Más ancho o más corto que el establecido por el atributo width?

¡Gracias por cualquier ayuda con anticipación!

EDITAR - aclaración: Necesito elemento de entrada para ser de tamaño variable libremente - a cualquier ancho - más de 200px y menos de 200px

EDIT 2 - preferentemente Busco solución puro CSS si es posible.

Answer 1

Esto es bastante cercano a realizable. Debe configurar size="1" como un atributo en el <input> para cambiar el tamaño realmente pequeño. El tamaño está controlado por input:active que anula la clase base con width: auto;. input:focus evita que se contraiga cuando lo tabula para escribir.

Posibles problemas: input:focus fuerza el <input> a un min-size específico, que podría ser más grande de lo que ha sido redimensionado. Puede llamar al min-width: 100% para hacer de esto una "función" en lugar de un problema, lo que le da más espacio al usuario para escribir. Si el <input> tiene foco, el tamaño sigue estando limitado por min-width, pero el cambio de tamaño generalmente se realiza después del enfoque (y también, principalmente se usa para hacer algo más grande).

Demostración: http://jsfiddle.net/ThinkingStiff/jNnCW/

HTML (con los estilos en línea como requeridos):

<input id="text" type="text" size="1"/> 
<style> 
    input { 
     resize: horizontal; 
     width: 200px; 
    } 

    input:active { 
     width: auto; 
    } 

    input:focus { 
     min-width: 200px; 
    } 
</style>