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 field-sizing, możesz to zaimplementować jedną linijką kodu CSS.

Uwaga! Właściwość wpierana jest wyłącznie przez przeglądarkę Chrome 123+ oraz Microsoft Edge 123+.

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.

Bibliografia

Zobacz także

Cookie Store - Nowoczesne API do zarządzania ciasteczkami