Making HTML5 datalist visible when focus event fires on input

Question

As some might know already styling select element is a nightmare, literally impossible without some javascript trickery. The new datalist in HTML5 could serve the same purpose s

Answer 1

Question is pretty old, but it's top search on google and there are no answers to be found so I'll add it here.

To expand datalist on first click you need to set

dataListElement.style.display = "block";

and immediately hide it in next line, so it does not appear as element in your DOM, but it will only expand it under input element.

dataListElement.style.display = "none";

As of today it's not expanded on first click only in Firefox.