删除 chrome 中带有属性“list”的输入的箭头答案

【问题标题】：remove arrow in chrome for input with attribute "list"删除 chrome 中带有属性“list”的输入的箭头
【发布时间】：2014-04-20 01:23:05
【问题描述】：

我有这个代码：

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Google Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

在 Chrome 中，我在右上角看到一个黑色的小箭头

有什么办法可以删除或隐藏它？

JSFiddle

更新：

我知道我可以包装它，然后用伪元素将其关闭，如JSFiddle所示

但是我需要另一种解决方案，还有其他方法吗？

【问题讨论】：

什么版本的 Chrome？我无法在 Chrome 34 上使用它。(Screenshot)
我的也是 34，但在焦点或悬停时我明白了
抱歉，链接有误，这里是正确的jsfiddle.net/sarhov/S4w5B/12
@sarhov 请问你为什么不想要那个箭头？
@sarhov jsfiddle.net/S4w5B/14

标签： html css google-chrome webkit

【解决方案1】：

以下将起作用：

input::-webkit-calendar-picker-indicator {
  display: none;
}

jsFiddle here

【讨论】：

好发现！。为什么地球会让事情变得如此复杂。

【解决方案2】：

我今天为此苦苦挣扎。在 Chrome 97 中，我需要添加一个重要的标签才能使其正常工作

input::-webkit-calendar-picker-indicator {
  display: none !important;
}

http://jsfiddle.net/pg0et59w/3/

【讨论】：