删除Chrome中的Datalist Dropdown Arrow

Question

Chrome显然在文本输入中添加了一个下拉箭头，引用了<datalist>。它出现在Chrome 34（Canary）中，但不是当前的稳定版本（Chrome 31）。

它仅在文本字段聚焦时出现（请参阅更新），并应用于两种输入类型text和search。

就本机浏览器实现而言，它可能会更糟，但正如您在图像中看到的那样，它与我的设计规范相冲突。

有谁知道如何删除或替换这个新功能？

<datalist id="list"><option value="foo"><option value="bar"></datalist>
<input type="text" list="list" name="field" maxlength="50" autocomplete="off" spellcheck="off" placeholder="Jump To">

更新：

当字段悬停（不仅仅是聚焦）时，箭头也会出现，不幸的是，当按钮本身悬停时，它也有自己的背景颜色：

Answer 1

感谢alexander farkas的评论，这里是删除箭头的样式规则：

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

Answer 2

感谢Cantera。我不想完全摆脱黑色箭头，只是围绕它的灰色方块。

input::-webkit-calendar-picker-indicator {
  background-color: inherit;
  }

Answer 3

input::-webkit-calendar-picker-indicator {
  opacity: 0;
}

同时为我删除了箭头，我发现创建了一个更好的点击体验，仍然可以点击箭头所在的位置，甚至可以增加它的宽度和高度> 1em，在输入中可能会将自定义箭头作为背景图像，箭头会在哪里。

Answer 4

正如其他人提到::-webkit-calendar-picker-indicator { display: none }在移除箭头时起作用，它也会影响<input type="date">上的html5日期选择器，

To remove just removing the datalist input would be:

[list]::-webkit-calendar-picker-indicator {
    display: none;
  }

Answer 5

尝试删除默认样式的-webkit-appearance: none