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 ingresaba en una entrada.

Con field-sizing, necesitas una línea de CSS para habilitar el tamaño en función del 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
• x

Source

Vínculos rápidos

Especificación | Explicación

¿Te gustan los videos de formato corto?

Wes Bos y Jhey tienen un gran video en Twitter que te presenta field-sizing.

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

Esta es 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 a un min-inline-size o se ajusta 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, en cuyo punto el texto se une y el tamaño del bloque de la entrada aumenta para adaptarse a la línea nueva.

<select> y <select multiple>

El elemento de selección se reduce para adaptarse a la opción seleccionada.

Una selección con el atributo multiple crece para adaptarse a la opción más ancha y ser tan alta como sea necesario para adaptarse 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 se ajusta 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, en cuyo punto 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 precompletado.

Cuando subes 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 los resultados

Este es un ejemplo interactivo y minimalista de los comportamientos antes y después de cada elemento del formulario, según lo afecte field-sizing.

Probar en Codepen

Análisis detallado

Cuando usas un [placeholder], el marcador de posición se convierte en el contenido. Esto se mencionó anteriormente, pero se hace hincapié aquí, ya que es importante saber cuándo aplicar un diseño 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

Manejo de estilos vacíos y desbordados

El uso de field-sizing significa que debes realizar un trabajo adicional. Ahmad Shadeed lo llama "CSS defensivo", en el que el objetivo no es necesariamente detallar exactamente cómo debe comportarse o verse algo, sino protegerlo de entrar 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 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.