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 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 ajuste de tamaño según el contenido. Este estilo de tamaño basado en el contenido también funciona para más de un textarea.

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

Browser Support

• 123
• 123
• x
• 26.2

Source

Vínculos rápidos

Especificación | Explicación

¿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 ajuste de tamaño de los campos?

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

<textarea>

La entrada se contrae hasta convertirse en 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 ajustarse a la nueva línea.

<select> y <select multiple>

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

Un elemento select con el atributo multiple crece para adaptarse a la opción más ancha y tener la altura necesaria para incluir la cantidad de opciones.

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

La entrada se contrae hasta convertirse en 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 corta 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 subes 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

A continuación, se muestra un ejemplo interactivo y mínimo de los comportamientos anteriores y posteriores de cada elemento del formulario, según se ven afectados por field-sizing.

Probar en Codepen

Acercamiento

Cuando se usa un [placeholder], el marcador de posición se convierte en el contenido. Esto ya se mencionó, pero se destaca aquí porque es importante saberlo al momento de asignar 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.

Probar en Codepen

Control 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 especificar exactamente cómo debe comportarse o verse algo, sino protegerlo de que 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 una caja demasiado pequeña y, en el caso de textarea, a 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.