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

Posted 2023-03-05

【中文标题】如何使输入类型的文本看起来像选择下拉菜单？

【英文标题】：How to make an input type text look like select dropdown?

【发布时间】：2015-08-07 16:33:27

【问题描述】：

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

另外，由于不同的浏览器有不同的下拉图标，有没有办法使用浏览器提供的相同下拉图标？

注意： 在显示选项值之前，我必须对选项值应用一些 CSS，而使用常规下拉菜单无法做到这一点。这就是我使用 div 和 jquery 来显示选项值的原因。

【问题讨论】：

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

然后使用select 元素？当您想要select 的外观时，不明白为什么要使用input[type=text]。如果不能直接修改 html，请使用 JS 进行转换。

@powerbuoy 我已经在问题中解释了原因

@SureshPonnukalai 会尝试的。但是你能在答案部分详细说明吗？谢谢:)

【参考方案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>

【讨论】：

也许我误解了这个问题？

在显示选项值之前，我必须对选项值应用一些 CSS，而使用您的代码或使用常规下拉菜单无法做到这一点。这就是我使用 div 和 jquery 来显示选项值的原因。

【参考方案2】：

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

 #wrap:after 
     content:arrow icon image;
 

JSFiddle

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