`field-sizing` în CSS

Design Responsiv și Interfață Chrome 123, Firefox 152, Safari 26.2

Face ca un textarea, input sau select să-și ajusteze singur mărimea după conținut, fără JavaScript.

Sintaxă CSS

field-sizing: content;  /* câmpul crește odată cu textul */
field-sizing: fixed;    /* implicit: mărime fixă */

Ce face `field-sizing`

Implicit, câmpurile de formular au o mărime fixă (field-sizing: fixed): un <textarea> are câteva rânduri, iar când scrii mai mult apare bara de derulare. Cu field-sizing: content, câmpul crește pe măsură ce utilizatorul scrie și se micșorează când șterge textul.

Funcționează pe <textarea>, pe câmpurile <input> de text și pe <select>. De obicei îl combini cu min-height/max-height (sau min-width/max-width la input) ca să nu devină prea mic sau prea mare.

Suport: Chrome 123, Firefox 152 și Safari 26.2. În browserele mai vechi proprietatea este ignorată și câmpul rămâne la mărimea fixă, deci o poți folosi fără risc.

Valori uzuale

Valoare	Descriere
`fixed`	Implicit: câmpul are mărimea dată de CSS sau de atributele lui.
`content`	Câmpul se adaptează la textul introdus (sau la placeholder când este gol).

Exemple

Exemplul 1: Textarea care crește cât scrii

Pornește de la 3 rânduri și crește până la 300px; peste această limită apare derularea.

.comentariu textarea {
  field-sizing: content;
  min-height: 4.5em;
  max-height: 300px;
  width: 100%;
}

Efect vizual în browser

Când Ana scrie un comentariu lung despre restaurantul din Iași, câmpul se înalță rând cu rând. După 300px se oprește din crescut și apare bara de derulare.

Exemplul 2: Câmp pentru cod poștal cât textul din el

Inputul are lățimea textului, cu o limită minimă, în loc de lățimea fixă implicită.

.cod-postal {
  field-sizing: content;
  min-width: 4ch;
  padding: 6px 8px;
}