如何使输入类型文本看起来像选择下拉

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>

Answer 2

我认为这是:后伪元素派上用场的时候。

 #wrap:after {
     content:arrow icon image;
 }

JSFiddle

但是你还不能为不同的浏览器使用不同的CSS样式表，所以到目前为止只有一种类型的图标。