05 · Forms

Forms

Textarea que crece y se achica solo

Chrome 123+

← Índice

Con field-sizing: content

CSS: textarea { field-sizing: content; min-block-size: 96px }

Input también

Chrome 123+ · En otros navegadores queda con tamaño fijo, sin romper nada.

css

textarea, input {
  field-sizing: content;   /* crece y se achica según el contenido */
  min-block-size: 96px;    /* alto mínimo inicial */
}

/* antes necesitabas JS: */
/* el.scrollHeight + el.style.height = el.scrollHeight */

Nota honesta sobre soporte

Muchas de estas APIs son recientes y aún no están en todos los navegadores (ver pill de cada sección). La gracia es que todas degradan bien: el carousel sigue scrolleando, el accordion abre/cierra, el textarea funciona — solo sin el "plus" animado.