6 sie 2025

CSS Field Sizing - Dostosowywanie rozmiaru inputów HTML do zawartości.

Prawdopodobnie widziałeś już wiele razy pole tekstowe, które dostosowuje swoją wysokość do liczby linii tekstu. Dzięki właściwości CSS field-sizing, jest to teraz możliwe do implementacji w bardzo prosty sposób.

textarea {
    field-sizing: content;
}

I to właściwie tyle, dzięki temu uzyskamy pożądany efekt.

  The field-sizing CSS property enables you to control the sizing behavior of
  elements that are given a default preferred size, such as form control
  elements. This property enables you to override the default sizing behavior,
  allowing form controls to adjust in size to fit their contents. This property
  is typically used to style text input and textarea elements to allow them to
  shrinkwrap their content as well as grow when more text is entered into the
  form control. Source: MDN
 

Ograniczyć zasięg rozszerzenia działania możemy za pomocą max-height.

  The field-sizing CSS property enables you to control the sizing behavior of
  elements that are given a default preferred size, such as form control
  elements. This property enables you to override the default sizing behavior,
  allowing form controls to adjust in size to fit their contents. This property
  is typically used to style text input and textarea elements to allow them to
  shrinkwrap their content as well as grow when more text is entered into the
  form control. Source: MDN
 

field-sizing aplikuje się do elementów:

input
textarea
select

Po całą resztę informacji odsyłam do bibliografi poniżej.

CSS Field Sizing - Dostosowywanie rozmiaru inputów HTML do zawartości.

Bibliografia