CSS field-sizing - Interactive Lab | IconVault
Make inputs, textareas and selects auto-resize to fit content with CSS field-sizing. Live demos and copyable CSS. Free, runs in your browser.
CSS field-sizing
Auto-resize inputs to fit content, no JavaScript needed
field-sizing yet (it works in Chrome and Edge 123+). The code below is still valid; try it in a Chromium browser to see the live growth.Auto input
0px
Fixed input
0px
Auto textarea
0px tall
5 of 5 free copies left.
Why it matters
Auto-growing inputs used to need a hidden mirror element and JavaScript measuring on every keystroke. One declaration replaces all of that, and it respects min/max sizes like any other box.
input: field-sizing vs fixed
Top: grows with content. Bottom: always fixed 280px.
The top input shares the same text as the fixed one. Watch the live width readout while you type.
textarea: grows vertically
Textareas grow in the block axis. max-height keeps long content scrollable instead of endless.
select: fits the longest option
The select shrinks to fit the chosen option instead of stretching to the longest one.
number input stays sane
field-sizing also works on number, date and other input types. min-width keeps the spinner usable.
/* auto-growing form controls, no JavaScript */
input, textarea, select {
field-sizing: content; /* input/select grow inline, textarea grows block */
min-width: 120px;
max-width: 560px;
}
/* cap a textarea vertically instead */
textarea.tall {
field-sizing: content;
max-height: 240px;
}Fallback for older browsers
Where field-sizing is unsupported it is simply ignored, so pair it with a sensible width fallback: input { width: 280px; field-sizing: content; }. Browsers that understand the property override the width; the rest keep the fixed size.
About this tool
IconVault's CSS field-sizing playground demonstrates the one-line replacement for auto-growing form controls. Set field-sizing: content and watch inputs grow inline, textareas grow vertically and selects shrink to the chosen option, all with zero JavaScript. Live pixel measurements prove the growth as you type. It is free and runs fully in your browser.
Adjust min-width and max-width to keep growth under control, compare against a fixed-width input side by side, and copy the finished CSS including the width fallback for older browsers. Auto-growing fields used to need hidden mirror elements and keystroke measuring; this property deletes all of that.
Frequently asked questions
Popular searches
More tools
Algorithm Visualizer
Watch sorting and searching animate step by step
Alt Text Helper
Write better image alt text with live feedback
ARIA Reference
Searchable ARIA roles and attributes guide
Array Visualizer
Step through map, filter, reduce like a debugger
Coming soon
CLI
Coming soon
Figma plugin
Coming soon
VS Code extension
Coming soon
Chrome extension
Coming soon
AI icon generator
Coming soon
Team workspaces
Coming soon