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 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;
}

Navegadores compatibles

• 123
• 123
• x
• x

Origen

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 una 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, 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 ajustarse 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.