<datalist>: The HTML Data List element

The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls.

Attributes

This element has no other attributes than the global attributes, common to all elements.

Examples

Basic datalist

<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>

Result

Customizing datalist styles

The style of the list produced by a <datalist> element is platform-dependent, so if you want to customize the display of the options, you have to implement your own custom solution that overrides the default behavior. The below example provides a simple solution for this. Note how we haven't specified the <datalist> id inside the <input> list attribute in this case, as that stops the browser-specific display of the data list items from kicking in. Instead, we are setting the selected <datalist> value in the <input> via JavaScript.

HTML

<input
  list=""
  name="option"
  id="input"
  autocomplete="off"
>

<datalist id="datalist">
  <option>Carrots</option>
  <option>Peas</option>
  <option>Beans</option>
</datalist>

CSS

datalist {
  position: absolute;
  background-color: lightgrey;
  font-family: sans-serif;
  font-size: 0.8rem;
}

option {
  background-color: #bbb;
  padding: 4px;
  margin-bottom: 1px;
  cursor: pointer;
}

JavaScript

input.onfocus = function () {
  datalist.style.display = 'block';
}

for (let option of datalist.options) {
  option.onclick = function () {
    input.value = this.value;
    datalist.style.display = 'none';
  }
}

datalist.style.width = input.offsetWidth + 'px';
datalist.style.left = input.offsetLeft + 'px';
datalist.style.top = input.offsetTop + input.offsetHeight + 'px';

Result

Specifications

Browser compatibility

Polyfill

Include this polyfill to provide support for older and currently incompatible browsers:
datalist-polyfill

See also

• The <input> element, and more specifically its list attribute;
• The <option> element.