2012-07-31 9 views
6

El elemento de entrada por defecto es size = "20" si esto no está definido en línea o si se le atribuye una regla de estilo CSS.Tamaño de elemento de entrada predeterminado

¿Cómo se establece el valor predeterminado del tamaño real del valor? Para otros elementos:

<div style="display: inline; width: auto;"> 
    The box will only fit the width of it's content 
</div> 

width: auto es todo lo que necesita. No puedo poner un ancho definido ya que el valor puede ser más largo. Por ejemplo:

<input id="short" type="text" value="1000" /> 
<input id="long" type="text" value=" Areally long name is in this input field." /> 

Quiero #short a ser el tamaño de 1000 (esencialmente size = "4" + el relleno), pero la #long a ser tan largo como sea necesario. Estas entradas vienen en forma programática, así que no puedo simplemente poner una clase corta en la que quiero corto y una clase larga en la que quiero larga. Realmente me gustaría si pudiera poner:

input { width: auto; } 

¿De todos modos para hacer esto?

+0

posible duplicado de [ancho: automático para campos] (http://stackoverflow.com/questions/4622086/widthauto-for-input-fields) – j08691

+0

Vi eso y algunos otros, pero lo que todos están tratando hacer es tener una entrada llenar un padre. Quiero que se multipliquen las entradas según el contenido. –

+0

Pero es un duplicado exacto de http://stackoverflow.com/questions/8100770/auto-scaling-inputtype-text-to-width-of-value –

Respuesta

7

El elemento de entrada por defecto es size = "20"

Este "tamaño predeterminado" depende del navegador, la versión y su sistema operativo. No es posible hacer esto en estilos en línea.

la mejor solución es establecer la anchura y el relleno lo que añade hasta el 100%

input { 
    width: 98%; 
    padding: 1%; 
} 

luego otra vez en absoluto izquierda y derecha 0

<fieldset> 
    <input type="text" /> 
</fieldset> 

finalmente agregar este css

<style type="text/css"> 
    fieldset { 
     position: relative; 
    } 

    input { 
     position: absolute; 
     left: 0; 
     right: 0; 
    } 
</style> 
+1

Hola, estás diciendo que el tamaño de entrada depende del navegador y OS. ¿Tiene un enlace o una tabla que muestra los diferentes tamaños de entrada según las versiones del navegador y el sistema operativo? Sería muy útil. – Fab

+0

¿Tiene alguna sugerencia? – Fab

+0

Hasta donde yo sé, todavía no hay artículos sobre este tema ... – Sato

0

Suponiendo que tiene cada entrada en su propia fila en el formulario, puede establecer el atributo de tamaño en el tamaño deseado, pero una lso añadir un css de:

input[type="text"] { 
    max-width: 100%; 
} 

Esto asegura que el campo no se desborde el formulario. Este enfoque proporciona una indicación visual de la cantidad de datos que se esperan para los campos cortos (porque tendrán el tamaño correcto) al mismo tiempo que ponen un límite a los largos.

Cuestiones relacionadas