jquery - 如何使输入类型文本看起来像选择下拉列表？

Question

有什么方法可以使 input type=text 元素看起来像下拉列表？目前我有一个文本框，单击它时我使用 jquery 和 div 显示选项。我希望文本框有一个下拉图标，使其看起来像一个普通的下拉菜单。

此外，由于不同的浏览器具有不同的下拉图标，是否有办法使用浏览器提供的相同下拉图标？

注意:在显示它之前，我必须将一些 css 应用于选项值，而我不能使用常规下拉列表来做到这一点。这就是我使用 div 和 jquery 来显示选项值的原因。

Answer 1

试试这个例子!

<div>Choose a browser from this list:</div>
<input list="browsers" />
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
</datalist>

<div>Choose a browser from this list:</div>
    <input list="browsers" />
    <datalist id="browsers">
      <option value="Chrome">
      <option value="Firefox">
      <option value="Internet Explorer">
      <option value="Opera">
      <option value="Safari">
    </datalist>