Limited supportLimited browser support. Check compatibility before use.
Syntax and cascade Limited support

field-sizing

The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.

Syntax and cascade

Overview

The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
field-sizing
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

Textareaautostretchshrink

field-sizing Textareaautostretchshrink demo.

PreviewFullscreen

Inputfieldstretchshrink

field-sizing Inputfieldstretchshrink demo.

PreviewFullscreen

Selectautowidth

field-sizing Selectautowidth demo.

PreviewFullscreen

Use cases

  • Using field-sizing

    The field-sizing CSS property allows form controls such as <textarea> to be sized based on their content.

Cautions

  • Limited browser support. Check compatibility before use.

Accessibility

  • Make sure visual changes are conveyed appropriately to assistive technology.

Related links

Powered by web-features