NoLoJS logo

Input with Dropdown - Text

Native HTML dropdown attached to input element, no CSS or JS required.

Demo

HTML

<!-- `list="browsers"` on the `input` connects to `id="browsers"` on the `datalist` -->
<label for="browser">Browser</label>
<input type="text"
       id="browser" 
       name="browser"
       list="browsers" />
<datalist id="browsers">
  <option value="Arc"></option>
  <option value="Brave"></option>
  <option value="Chrome"></option>
  <option value="DuckDuckGo"></option>
  <option value="Firefox"></option>
  <option value="Microsoft Edge"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
  <option value="Tor"></option>
  <option value="Vivaldi"></option>
</datalist>

CSS

No special CSS required.

JS

No JS required.

Baseline

[`datalist`](https://webstatus.dev/features/datalist)

CodePen

See the Pen on CodePen.