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

I hope you like this solution:

I added a “temp” attribute to the input field for storage and once the mouse hovers over the input filed it will save its current value in temp and then delete the value so as to allow the datalist to open.

On mouseout it will restore the field’s value from the variable temp. This solution works great under Chromium that I tested.

As a bonus you can add a placeholder="Click to see all your options"