field-sizing
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 123 | 123 | | 26.2 | 123 | 26.2 | |
content | 123 | 123 | | 26.2 | 123 | 26.2 |
fixed | 123 | 123 | | 26.2 | 123 | 26.2 |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Syntax
CSS
textarea {
field-sizing: content;
min-height: 3lh;
max-height: 10lh;
}
input {
field-sizing: content;
min-width: 10ch;
}Live demo
Use cases
-
Using field-sizing
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.
Cautions
- Limited browser support. Check compatibility before use.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.