The list Attribute

Input type	Firefox 4+	Safari 7-	Safari 7-	Chrome 20+	Opera 9+	IE 10+	Android 4.3-
Text, url, etc.
type="range"
type="color"

The Low Down

When an input with a list attribute matching a corresponding <datalist>element comes into focus, is double clicked or upon data entry, a dropdown menu appears populated by the option elements present as children of the <datalist>.

• You might think of an <input> with a linked <datalist> like you would a group of radio buttons with an “Other: _________” choice or a select that also allows for free form data entry. For most input types, it behaves a bit like autocomplete or “suggested” items might. If you type “V” the list will show only items that start with “V” in Chrome, Opera and IE, and any <option> containing “V” in Firefox.
• For <input type="range">, supporting browsers show tick marks along the slider at each value included as an <option> in the associated <datalist>.
• For the date/time input types, supporting browsers show a drop down <option> in the associated <datalist>.
• In the color input type, you can use the list attribe to link to a <datalist>showing preselected color <option>s.
• Firefox doesn’t show the data list drop down on focus, rather you have to double click on the input, otherwise it will show the suggestions upon data entry.
• In mobile, this attribute is supported for most input types in Blackberry 10, Opera mobile thru v 12.1 (support was removed in 21), Chrome for Android and Firefox for Firefox OS. Not supported in IE10 mobile.
• Fallback is just a regular text input. In non-supporting browsers, the <datalist> will not show unless you include a nested <select>, which is a way of falling back, as shown in progressive usage below as demonstrated by Jeremy Keith.