在Chrome中移除Datalist下拉箭头 [英] Remove Datalist Dropdown Arrow in Chrome

问题描述

Chrome显然在引用< datalist> 的文本输入中添加了一个下拉箭头。

Chrome has apparently added a dropdown arrow to text inputs that reference a <datalist>. It's appearing in Chrome 34 (Canary) but not in the current stable build (Chrome 31).

只有在文字栏位集中时才会显示（请参阅更新），而且这个项目会显示在Chrome 34（Canary）应用于两种输入类型 text 和搜索。

It appears only when the text field is focused (see update) and is applied to both input types text and search.

对于本机浏览器实现，可能会更糟，但正如您在图片中看到的，它与我的设计规范冲突。

It could be worse as far as native browser implementations go, but as you can see in the image, it conflicts with my design specs.

有人知道如何移除或取代这项新功能吗？

Does anyone know how to remove or replace this new feature?

<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">

更新：

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

The arrow also appears when the field is hovered (not just focused) and unfortunately also has its own background color when the button itself is hovered:

推荐答案

感谢 alexander farkas 发表的评论，以下是删除箭头的样式规则：

Thanks to the comment by alexander farkas, here is the style rule to remove the arrow:

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

这篇关于在Chrome中移除Datalist下拉箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！