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

Question

有什么方法可以使输入类型=文本元素看起来像一个下拉列表？目前我有一个文本框,当点击时,我使用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

我认为这是在：after伪元素派上用场的时候。将输入内容包装在DIV中。

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

JSFiddle

但是您还无法针对不同的浏览器使用不同的CSS样式表，因此到目前为止，仅一种类型的图标。