Tamaño del campo CSS

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

Adam Argyle

Sin field-sizing, para crear un campo de entrada de tamaño adecuado, debías adivinar un tamaño promedio de una entrada de campo de texto o usar JavaScript para contar 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 tamaño según el contenido. Este estilo de tamaño basado en contenido también funciona para más de un área de texto.

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

Vínculos rápidos

Especificación | Video explicativo

¿Te gustan los videos de formato corto?

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

¿Qué elementos se ven afectados por el tamaño del campo?

Aquí tienes una lista de <form> elementos en los que field-sizing funciona, 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 ajusta y el tamaño del bloque de la entrada crece para ajustarse a la línea nueva.

<select> y <select multiple>

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

Un select con el atributo multiple crece para ajustarse a la opción más ancha y para 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 rellenado previamente.

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

Cómo ver, probar y comparar resultados

Aquí tienes un ejemplo interactivo y mínimo de los comportamientos antes y después de cada elemento de formulario, según lo afectado por field-sizing.

Pruébalo en Codepen

Observación más detallada

Cuando se usa un [placeholder], el marcador de posición se convierte en el contenido. Esto se mencionó anteriormente, pero se destacó aquí, ya que es importante saber cuándo se aplica un 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 significa que debes hacer un trabajo adicional. Ahmad Shadeed lo llama "CSS defensivo", en el que el objetivo no es necesariamente especificar exactamente 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 considerable 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 un cuadro demasiado pequeño y, en el caso de textarea, 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 lh unidad es perfecta para los tamaños de bloque y ch funciona bien para los tamaños intercalados.

¿Cuál es el valor predeterminado del tamaño del campo?

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