<datalist>

Example from MDN

<label for="ice-cream-choice">
    Choose a flavor:
</label>
<input
    list="ice-cream-flavors"
    id="ice-cream-choice"
    name="ice-cream-choice"
/>

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Pros

Cons

  • very few features
  • almost no customizability
  • no styling possible(?)
  • behaves quite differently in different browsers,
    e.g. Safari:

Final verdict:

Let's not use it.

The <datalist> element

By Sebastian Herrmann

The <datalist> element

Let's take a look at the html element and its pros and cons…

  • 372
Loading comments...

More from Sebastian Herrmann