ancho: automático para campos <input>

122

Pregunta de CSS para novatos. Pensé width:autoque un display:blockelemento significaba "llenar el espacio disponible". Sin embargo, para un <input>elemento, este no parece ser el caso. Por ejemplo:

<body>
<form style='background-color:red'>
<input type='text' style='background-color:green;display:block;width:auto'>
</form>
</body>

Entonces dos preguntas:

¿Existe una definición de exactamente qué ancho: auto significa? La especificación CSS me parece vaga, pero tal vez me perdí la sección relevante.
¿Hay alguna manera de lograr mi comportamiento esperado para un campo de entrada? llenar el espacio disponible como lo hacen otros elementos a nivel de bloque?

¡Gracias!

css

— richb
fuente

posible duplicación de entrada con pantalla: el bloque no es un bloque, ¿por qué no?

— Phrogz

@Phrogz Sí, es un duplicado. Busqué pero no lo encontré. Gracias.

— richb

88

El <input>ancho de An se genera a partir de su sizeatributo. El valor predeterminado sizees lo que impulsa el ancho automático.

Puede intentarlo width:100%como se ilustra en mi ejemplo a continuación.

No llena el ancho:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:auto' />
</form>

Ancho de relleno:

<form action='' method='post' style='width:200px;background:khaki'>
  <input style='width:100%' />
</form>

Tamaño más pequeño, ancho más pequeño:

<form action='' method='post' style='width:200px;background:khaki'>
  <input size='5' />
</form>

ACTUALIZAR

Esto es lo mejor que pude hacer después de unos minutos. Tiene 1 px de descuento en FF, Chrome y Safari, y es perfecto en IE. (El problema es que # ^ & * IE aplica los bordes de manera diferente a todos los demás, por lo que no es consistente).

<div style='padding:30px;width:200px;background:red'>
  <form action='' method='post' style='width:200px;background:blue;padding:3px'>
    <input size='' style='width:100%;margin:-3px;border:2px inset #eee' />
    <br /><br />
    <input size='' style='width:100%' />
  </form>
</div>

— Ben
fuente

24

Gracias. ancho: 100% no es lo mismo aunque. Desbordará el cuadro principal si hay márgenes o un borde.

— richb

1

Puede configurarlos explícitamente para ajustarlos como desee, por ejemplo border:2px inset #eee; margin:-2px. Aunque no lo he probado yo mismo, pero algo por el estilo.

— Ben

3

Gracias Steve. También debería consultar stackoverflow.com/questions/1030793/… que tiene otras ideas interesantes.

— richb

1

Solución épica para anchos consistentes a través de CSS en los campos de entrada, +1

— Stephen Sprinkle

11

puede usar establecer la propiedad de tamaño de caja de entradas en border-box para evitar que el borde se superponga al contenedor.

— nicholas

26

"¿Existe una definición de qué ancho: auto significa exactamente? La especificación CSS me parece vaga, pero tal vez me perdí la sección relevante".

En realidad, nadie respondió la parte anterior de la pregunta del cartel original.

Aquí está la respuesta: http://www.456bereastreet.com/archive/201112/the_difference_between_widthauto_and_width100/

Siempre que el valor de ancho sea automático, el elemento puede tener margen horizontal, relleno y borde sin ser más ancho que su contenedor ...

Por otro lado, si especifica ancho: 100%, el ancho total del elemento será el 100% de su bloque contenedor más cualquier margen horizontal, relleno y borde ... Esto puede ser lo que desea, pero lo más probable es que no lo sea. .

Para visualizar la diferencia hice un ejemplo: http://www.456bereastreet.com/lab/width-auto/

— respuesta
fuente

4

buena respuesta / enlace, sugiero poner un tercer ejemplo con "box-sizeing: border-box" ...

— halfbit

eso no es para una entrada y dado que auto es el valor predeterminado, no veo cómo es tan útil

— Barbz_YHOOL

9

Como se indica en la otra respuesta, width: auto no funciona debido a que el ancho que genera el atributo de tamaño de la entrada, que no se puede establecer en "auto" o algo similar.

Hay algunas soluciones que puede utilizar para hacer que funcione bien con el modelo de caja, pero nada fantástico que yo sepa.

Primero, puede configurar el relleno en el campo usando porcentajes, asegurándose de que el ancho sume el 100%, por ejemplo:

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

Otra cosa que puede intentar es usar el posicionamiento absoluto, con la izquierda y la derecha configuradas en 0. Usando este marcado:

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

Y este CSS:

fieldset {
  position: relative;
}

input {
    position: absolute;
    left: 0;
    right: 0;
}

Este posicionamiento absoluto hará que la entrada llene el conjunto de campos principal horizontalmente, independientemente del margen o relleno de la entrada. Sin embargo, una gran desventaja de esto es que ahora tiene que lidiar con la altura del conjunto de campos, que será 0 a menos que la configure. Si todas sus entradas tienen la misma altura, esto funcionará para usted, simplemente establezca la altura del conjunto de campos a la altura que debería ser la entrada.

Aparte de esto, hay algunas soluciones JS, pero no me gusta aplicar un estilo básico con JS.

— Jon Raasch
fuente

8

Debido a que input's widthes controlado por ella de sizeatributo, así es como me inicializar un input widthacuerdo con su contenido:

<input type="text" class="form-list-item-name" [size]="myInput.value.length" #myInput>

— Fabricio
fuente

1

Aunque esta #angularrespuesta específica no es una respuesta válida a la pregunta del OP (y no estoy votando a favor), llegué a este tema solo para encontrar esta idea en particular.

— nobug

5

Puede que no sea exactamente lo que desea, pero mi solución es aplicar el estilo de ancho automático a un div contenedor y luego establecer su entrada al 100%.

— mwilcox
fuente

0

La única opción que se me ocurre es utilizar width:100%. Si también desea tener un relleno en el campo de entrada, además de colocar un contenedor labela su alrededor, mueva el formato a esa etiqueta, mientras que también especifique el relleno en la etiqueta. Los campos de entrada son rígidos.

— Lajos Meszaros
fuente

0

Respuesta 1 - "respuesta" dio una buena respuesta / enlace. En pocas palabras, "auto" es el valor predeterminado, por lo que es como eliminar cualquier cambio en el ancho de un elemento.

Respuesta 2: úsala width: 100%en su lugar. Llena el 100% del contenedor principal, en este caso, el "formulario".

— Akhil Gupta
fuente

-4

Enlaces absolutamente asombrosos que describen una característica absolutamente asombrosa:

https://css-tricks.com/snippets/css/a-guide-to-flexbox

https://www.htmllion.com/css-flexbox.html

La esencia:

Ponga los elementos en un recipiente con display: flex;.
Establecer flex-grow: 1;en cada uno de los elementos contenidos.
Si tiene elementos dentro de esos elementos contenidos que también necesitan crecer, repita los pasos 1 y 2 para los elementos contenidos y sus elementos secundarios (contenidos-contenidos).
Adáptese y ajústelo según las distintas necesidades (ver enlaces)

Editar - ejemplo :

<body style="display: flex;">
  <div style="display: flex; flex-grow: 1;">
    <input type="text" style="flex-grow: 1;" />
  </div>
</body>

— Andrés
fuente

¿Cómo ayuda eso con un ancho automático para las entradas?

— kernel

@kernel Simple. Ver ejemplo.

— Andrew

El ancho de la entrada es siempre del 100% y no el mínimo posible.

— kernel

2

La entrada aún no tiene el mismo ancho que su contenido, que era la pregunta.

— kernel

Si lee la respuesta aceptada, y también la de todos los demás, hace algo diferente. La pregunta entonces sería "¿qué estás haciendo bien que todo el mundo está haciendo mal?".

— kernel