Tamaño del campo CSS

Una línea de código para ajustar automáticamente el tamaño de los elementos con contenido editable.

Adam Argyle

Sin field-sizing, para crear un campo de entrada de buen tamaño, tenías que adivinar el tamaño promedio de una entrada de campo de texto o usar JavaScript para contar los caracteres y aumentar la altura o el ancho del elemento a medida que el usuario ingresaba texto. En otras palabras, no era fácil y era propenso a errores cuando se intentaba seguir el contenido que un usuario había ingresado en una entrada.

Con field-sizing, necesitas una línea de CSS para habilitar el ajuste de tamaño según el contenido. Este estilo de ajuste de tamaño basado en el contenido también funciona para más que un área de texto.

textarea, select, input {
  field-sizing: content;
}

Browser Support

• 123
• 123
• 152
• 26.2

Source

Vínculos rápidos

Especificación | Explicación

¿Te gustan los videos de formato corto?

Wes Bos y Jhey tienen un video excelente en Twitter en el que presentan field-sizing.

¿Qué elementos se ven afectados por field-sizing?

A continuación, se incluye una lista de elementos <form> en los que funciona field-sizing, con un resumen de los efectos que tiene en cada uno.

<textarea>

La entrada se contrae a un min-inline-size o para ajustarse al marcador de posición.

A medida que los usuarios escriben, la entrada crece en la dirección intercalada hasta que alcanza un tamaño intercalado máximo, momento en el que el texto se ajustará y el tamaño del bloque de la entrada crecerá para adaptarse a la nueva línea.

<select> y <select multiple>

El elemento select se reduce para ajustarse a la opción seleccionada.

Un elemento select con el atributo multiple crece para ajustarse a la opción más ancha y ser tan alto como sea necesario para ajustarse a la cantidad de opciones.

<input type="text">, <input type="email"> y <input type="number">

La entrada se contrae a un min-inline-size o para ajustarse al marcador de posición.

A medida que los usuarios escriben, la entrada crece en la dirección intercalada hasta que alcanza un max-inline-size, momento en el que el desbordamiento recorta el valor de entrada.

<input type="file">

La entrada se contrae hasta el botón y el texto del nombre de archivo completado previamente.

Cuando se sube un archivo, la entrada se vuelve tan ancha como el botón más el texto del nombre del archivo.

Cómo ver, probar y comparar resultados

A continuación, se muestra un ejemplo interactivo y mínimo de los comportamientos antes y después de cada elemento de formulario, según lo que afecte field-sizing.

Pruébalo en Codepen

Analizando con más detalle

Cuando usas un [placeholder], el marcador de posición se convierte en el contenido. Esto se mencionó anteriormente, pero se destaca aquí, ya que es importante saberlo cuando se aplica estilo a un formulario. Un marcador de posición largo o corto cambiará el tamaño intrínseco de las entradas con field-sizing: content.

Pruébalo en Codepen

Manejo de estilos vacíos y desbordados

Usar field-sizing implica que debes realizar un trabajo adicional. Ahmad Shadeed lo llama "CSS defensivo", en el que el objetivo no es necesariamente explicar con exactitud cómo debe comportarse o verse algo, sino protegerlo para que no entre en un estado visual no deseado. Anteriormente, las entradas tenían una cantidad razonable de tamaños fijos, pero, después de aplicar field-sizing: content, las entradas pueden volverse demasiado pequeñas o demasiado grandes.

Los siguientes estilos son un buen punto de partida. Ayudan a que los elementos no se contraigan en una caja demasiado pequeña y, en el caso de textarea, que no crezcan demasiado.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

Este CSS usa unidades relativas para el tamaño. La nueva unidad lh es perfecta para los tamaños de bloque, y ch funciona bien para los tamaños intercalados.

¿Cuál es el valor predeterminado de field-sizing?

El valor predeterminado de field-sizing es fixed y solo acepta los dos valores de fixed o content.