如何将文本输入框变成下拉选择框？

Question

有没有办法使输入类型为文本的元素看起来像下拉框？目前我有一个文本框，当单击它时，我使用jquery和div显示选项。我想让文本框有一个下拉图标，使其看起来完全像常规下拉框。

另外，由于不同的浏览器具有不同的下拉图标，是否有一种方法可以使用浏览器提供的相同下拉图标？

注意：在显示选项值之前，我必须对一些CSS进行应用，这是我无法使用常规下拉框进行的操作。这就是为什么我使用div和jquery来显示选项值的原因。

- Sachin B. R.

---

使用下拉图标作为文本框的背景。 - Suresh Ponnukalai

那么使用 select 元素呢？如果你想要 select 的外观，为什么要使用 input[type=text] 呢？如果无法直接更改 HTML，请使用 JS 进行转换。 - powerbuoy

@powerbuoy，我现在已经在问题中解释了原因。 - Sachin B. R.

@SureshPonnukalai 我会尝试。但是你能否在答案部分详细解释一下呢？谢谢:) - Sachin B. R.

使用jQuery，您可以在创建时始终应用所需的CSS更改；甚至可以在单击元素时立即应用。 - Ajowi

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>

- Joakim M

---

也许我误解了问题？ - Joakim M

我必须在显示选项值之前应用一些CSS，但是使用您的代码或常规下拉菜单无法实现。这就是为什么我使用div和jquery来显示选项值的原因。 - Sachin B. R.

我不知道它是否解决了问题，但这正是我一直在寻找的神奇之处。这种类型的输入总是让我困惑。 - Ajowi

Answer 2

我认为这就是 :after 伪元素发挥作用的时候。将您的输入包装在 DIV 中。

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

JSFiddle

但目前还没有办法为不同的浏览器使用不同的CSS样式表，因此目前只有一种类型的图标。

- freewheeler