Как некоторые могут знать, что стиль стилизации выбирает элемент, это кошмар, буквально невозможный без какого-либо обмана javascript. Новый datalist в HTML5 может служить той же цели, поскольку пользователю представлен список опций, и значение записывается в текстовое поле ввода.
Ограничение здесь - список не появляется, пока пользователь не начнет вводить текст в текстовое поле, и даже тогда отображается только возможные совпадения на основе их ввода. Поведение, которое я хочу, состоит в том, что, как только фокусируется на поле, весь список вариантов становится видимым.
Итак, у меня есть этот код - вид на jsbin
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Input - Datalist</title>
</head>
<body>
<input list="categories">
<datalist id="categories">
<option value="Breakfast">Breakfast</option>
<option value="Brunch">Brunch</option>
<option value="Lunch">Lunch</option>
<option value="Dinner">Dinner</option>
<option value="Desserts">Desserts</option>
</datalist>
</body>
</html>
и я пытаюсь показать это с помощью этого Javascript:
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);
Любая помощь будет оценена,
Приветствия