Webmasters Gallery

Input elements within form fields have historically been the toughest to style. New CSS properties offer a much easier time, but user experience is still a tricky gray area.

One performance technique is to auto-fix fields within a form so that they expand or contract based on the user’s content. So an empty field would be much smaller than fully-entered fields, or perhaps they’d stay a fixed width based on the container element(useful for responsive design).

A new plugin named Stretchy can help solve this little nuisance. A developer named Lea Verou published this on GitHub and put out some amazing documentation.

Stretchy can work on all form inputs from text fields to select menus. It also requires no dependencies running purely on traditional JavaScript. The Stretchy landing page includes a list of features and live examples you can test out for yourself.

The minified JS file is only 1.5KB which is pretty reasonable for such a self-controlled library.

All you do is add the lib into your HTML document and call the Stretchy() API. It is possible to manually target new elements, but modern browsers support JS delegation so any new elements should be automatically targeted by Stretchy methods. Pretty great, eh?

Definitely check out the Stretchy main page if you’re curious to learn more. There’s plenty of easy-to-skim documentation along with a bookmarklet if you want to try out the effect before installing on a website.

And of course if you wanna pull down a copy of the repo just visit Stretchy on GitHub for the latest version.