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 since the user is presented with a list of options and the value is recorded in an input text field. The limitation here is the list does not appear until the user start typing something in the text field and even then is only shown possible matches based on their input. The behavior I want is that as soon as there is focus on the field the entire list of options become visible.So I have this code - view on jsbin\[code\]<!DOCTYPE html><html><head><meta charset=utf-8 /><title>Input - Datalist</title></head><body> <input list="categories"> <datalist id="categories"> <option value="http://stackoverflow.com/questions/15622076/Breakfast">Breakfast</option> <option value="http://stackoverflow.com/questions/15622076/Brunch">Brunch</option> <option value="http://stackoverflow.com/questions/15622076/Lunch">Lunch</option> <option value="http://stackoverflow.com/questions/15622076/Dinner">Dinner</option> <option value="http://stackoverflow.com/questions/15622076/Desserts">Desserts</option> </datalist></body></html>\[/code\]and I'm trying to get that to show with this Javascript:\[code\] var catVal = document.getElementsByTagName("input")[0], cat = document.getElementById("categories"); catVal.style.fontSize = "1.3em"; catVal.addEventListener("focus", function(event){ cat.style.display = "block"; }, false);\[/code\]Any help would be appreciated,Cheers
Making HTML5 datalist visible when focus event fires on input
- Thread starter redwings
- Start date