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

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

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

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

JSFiddle

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