Html 在 Chrome 中删除数据列表下拉箭头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20937475/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove Datalist Dropdown Arrow in Chrome
提问by cantera
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 显然已向引用<datalist>. 它出现在 Chrome 34 (Canary) 中，但没有出现在当前的稳定版本 (Chrome 31) 中。
It appears only when the text field is focused (see update) and is applied to both input types textand search.
它仅在文本字段获得焦点时出现（请参阅更新）并应用于输入类型text和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">
Update:
更新：
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:
当字段悬停（不仅仅是聚焦）时，箭头也会出现，不幸的是，当按钮本身悬停时，它也有自己的背景颜色：
回答by cantera
Thanks to the comment by alexander farkas, here is the style rule to remove the arrow:
感谢alexander farkas的评论，这里是删除箭头的样式规则：
input::-webkit-calendar-picker-indicator {
display: none;
}
回答by Toby Belch
Thanks to Cantera. I didn't want to get rid of the black arrow entirely, just the gray square surrounding it.
感谢坎特拉。我不想完全去掉黑色箭头，只去掉它周围的灰色方块。
input::-webkit-calendar-picker-indicator {
background-color: inherit;
}
回答by jnowland
As others have mentioned ::-webkit-calendar-picker-indicator { display: none }works at removing the arrow it would also impact the html5 datepicker on a <input type="date">,
正如其他人提到::-webkit-calendar-picker-indicator { display: none }的移除箭头的工作，它也会影响 html5 日期选择器<input type="date">，
To remove justremoving the datalist input would be:
要删除仅删除 datalist 输入将是：
[list]::-webkit-calendar-picker-indicator {
display: none;
}
[list]::-webkit-calendar-picker-indicator {
display: none;
}
回答by dmartins
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
Also removed the arrow for me and I found created a better clicking experience to still click where the arrow would be, you can even increase the the width and height of it > 1em and in the input maybe put a custom arrow as a background image, where the arrow would be.
还为我删除了箭头，我发现创建了更好的单击体验，仍然可以单击箭头所在的位置，您甚至可以将其宽度和高度增加 > 1em，并且可以在输入中放置自定义箭头作为背景图像，箭头所在的位置。
回答by jmore009
try -webkit-appearance: nonethat should remove the default styles
尝试-webkit-appearance: none应该删除默认样式
