<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.

Content categories Flow content, phrasing content.
Permitted content Either phrasing content or zero or more <option> elements.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts phrasing content.
Implicit ARIA role listbox
Permitted ARIA roles No role permitted
DOM interface HTMLDataListElement


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


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">


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.

Note: Since ::after is not permitted on <input> elements, if you want to reproduce the arrow-down icon you will have to wrap the <input> element in another element that you can hang the styling on (or some other suitable solution).



<datalist id="datalist">


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;


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';



Specification Status Comment
HTML Living Standard
The definition of '<datalist>' in that specification.
Living Standard
The definition of '<datalist>' in that specification.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
datalistChrome Full support 20Edge Full support 12Firefox Full support 4IE Full support 10Opera Full support 9.5Safari Full support 12.1WebView Android Full support 4.4.3Chrome Android Full support 33Firefox Android Full support 4
Full support 4
Notes Since Firefox for Android 79, the dropdown menu containing available options does not appear. See bug 1535985.
Opera Android Partial support Partial
Partial support Partial
Notes The dropdown menu containing available options does not appear in Opera for Android.
Safari iOS Full support 12.2Samsung Internet Android Full support 2.0


Full support  
Full support
Partial support  
Partial support
See implementation notes.
See implementation notes.


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

See also