Expanding Form Field

With one line of CSS, text, output, select, and textarea form fields can automatically adjust to fit the contents, no JS required.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

Type into the text box below, enough to fill the box, and then some, note how it expands

Note how the select initially collapses to fit the current value, but expands when you open it, or select a longer value

Type into the textarea box below, enough to fill the box, and then some, note how it expands

HTML

<label for="text">Type into the <code>text</code> box below, enough to fill the box, and then some, note how it expands</label><br>
<input id="text" type="text" value="">

<hr>

<label for="select">Note how the <code>select</code> initially collapses to fit the current value, but expands when you open it, or select a longer value</label><br>
<select id="select">
  <option>Arc</option>
  <option>Brave</option>
  <option>Chrome</option>
  <option>DuckDuckGo</option>
  <option>Edge</option>
  <option>Firefox</option>
  <option>Opera</option>
  <option>Safari</option>
  <option>Tor</option>
  <option>Vivaldi</option>
</select>

<hr>

<label for="text">Type into the <code>textarea</code> box below, enough to fill the box, and then some, note how it expands</label><br>
<textarea id="textarea">
</textarea>

CSS

file, input, output, select, textarea {
  field-sizing: content;
}
/* Prevent emtpy elements fromo collapsing completely */
input, textarea {
  min-width: 200px;
}
textarea {
  min-height: 3rem;
}

JS

No JS required.

Baseline

[`field-sizing`](https://webstatus.dev/features/field-sizing)

CodePen

See the Pen on CodePen.