Forms should adapt to content.
Not the other way around.
Ever had to manually set the width of an input field, only to realise it’s either too short or too long?
Or worse, had to use JavaScript to resize it dynamically?
Now, CSS makes it effortless with just one property: field-sizing: content;
What does it do?
- Input, select, and textarea automatically adjust to fit their content.
- No need for JS workarounds or arbitrary width settings.
- Forms look cleaner and adapt naturally to user input.
The best part?
It works with placeholders too.
Fields shrink to the perfect size even before typing begins.
With browser support growing (more than 71%), this will be a game-changer for form UX.
You can already start using it as progressive enhancement.
Here’s the codepen: https://codepen.io/theosoti/pen/mydXVEy
To learn more tips about CSS, make sure to join my newsletter below ❤️