Form element autosizing, the way it should be.

Usage

Just include the script anywhere in the page:

By default, it applies to all <textarea> s, <select> menus with no size attribute and <input> elements that are text fields (e.g. with no type attribute, or with one equal to text , tel , email , url ).

To limit that set further you can use the data-stretchy-filter attribute, on any element. Note that this means you can use the attribute on the <script> element that calls Stretchy itself, in which case you can also shorten its name to data-filter .

For example, to restrict it to elements that either have the foo class or are inside another element that does, you could use data-stretchy-filter=".foo, .foo *" on an element or call Stretchy like this:

If you specify the data-stretchy-filter attribute on multiple elements, the last value (in source order) wins. data-filter directly on Stretchy’s <script> element takes priority over any data-stretchy-filter declaration.

If you want to avoid modifying the markup, you can use JavaScript instead:

Stretchy.selectors.filter = ".foo, .foo *";