← All Tools

CSS field-sizing Generator

The CSS field-sizing property lets form controls — <textarea>, <input>, <select> — size themselves to their content instead of their UA-defined default box. Set field-sizing: content and a textarea grows as the user types, replacing the classic scrollHeight JavaScript hack. Build your rule below and watch a live preview.

Apply to

Pick one element to demo, or apply globally to all form controls.

field-sizing value

content sizes the control to fit text. fixed restores the UA default (rows/cols/size attributes). Flip back and forth to compare.

Guardrails

min-width

max-width

min-height

max-height

Without bounds, controls can shrink to one character or grow off-screen. ch and lh units track the form control's own font.

Extras

Add padding Add :focus ring Wrap in @supports

@supports (field-sizing: content) isolates the rule so unsupported browsers fall back to their normal sizing.

Demo content

Type in the preview directly too — your edits there feed back into this demo content.

Live previewchecking…

The configured CSS is applied inside an isolated iframe. Try typing into the textarea, the input, and changing the select — only controls matching your selector follow the rule.

Generated CSS

Support: field-sizing shipped in Chrome 123 / Edge 123 (March 2024) and Safari 17.4. Firefox is implementing it behind a flag. Older browsers ignore the declaration and fall back to rows/cols/size attributes. Use @supports (field-sizing: content) to be safe.

Why this matters

Replaces the scrollHeight hack. The classic JS pattern (el.style.height = 'auto'; el.style.height = el.scrollHeight + 'px') thrashes layout and breaks on paste. field-sizing: content does it intrinsically.
Sizes <select> too. Selects with long options finally stop overflowing their container; the dropdown shrinks back when a shorter option is picked.
Always set min-* and max-*. An empty textarea with field-sizing: content can collapse to zero height — min-height: 2lh keeps it usable.
ch and lh units pair perfectly. They scale with the form control's font, so a 40-character textarea stays ~40 characters wide whether the font is 14px or 24px.
Works with resize. Users can still drag the corner to override; field-sizing only sets the intrinsic preferred size.