我需要您宝贵的建议和指导来帮助我摆脱这个棘手的局面。
我有一个场景，我需要构建一个如下所示的下拉菜单。
<ul class="dropdown">
<li><a href="#">America</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">China</a></li>
<li><a href="#">Denmark</a></li>
<li><a href="#">Egypt</a></li>
</ul>
所需的功能是我应该能够使用键盘输入滚动浏览元素，假设我按键盘上的“E”键，它应该悬停/聚焦在埃及。
我意识到使用 UL>Li 无法实现此功能，但是我们可以使用 Select 标签来实现此功能。
<select class="dropdown">
<option>America</li>
<option>Brazil</li>
<option>China</li>
<option>Denmark</li>
<option>Egypt</li>
<select>
但是当我们使用 select 标签时，我们无法设置下拉菜单的样式，尤其是 CSS 填充在大多数浏览器上的 select 标签下拉菜单上不起作用。
我想问的是，我如何构建一个具有这 3 个功能的下拉菜单:
1.Open on Tab key press
2.Browse listed items using key input.
3.Style the dropdown for cross broswer compatibility.
我确实花了足够的时间在网上寻找解决方案，除了这个插件之外我找不到任何完美的解决方案
https://silviomoreto.github.io/bootstrap-select/
我很遗憾地说，我不允许在工作中使用任何外部插件。为了实现这一目标，我可以使用的唯一工具是 Bootstrap、jQuery、Javascript、CSS、HTML，并且不能使用 Angular。
谁能帮我解决这个问题。
最佳答案
不幸的是，不可能在所有浏览器中一致地设置 <select> 下拉列表的样式。 Bootstrap Select 和其他类似的插件(例如 Chosen)使用 JS 和自定义标记来创建虚假的 <select> ，这不利于可访问性(请参阅 https://vimeo.com/84970341#t=614s )。
就我个人而言，我会使用 <select> 元素并使用默认的浏览器样式。
不过，您可以设置 <select> 切换本身的样式，而不会影响可访问性。只是不是下拉菜单。以下是一些示例:
另一种选择是将国家/地区编码为链接列表，并使其可使用 JS 进行扩展。请务必添加适当的咏叹调 Angular 色。
关于javascript - 通过按键输入搜索元素的下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36365093/