移除Chrome中的Datalist下拉箭头

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

似乎只有当文本字段被聚焦（参见更新）并且被施加到两个输入类型text和search。

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

enter image description here

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

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

更新：

当现场悬停（不只是集中），不幸的是还具有当按钮本身悬停自己的背景颜色的箭头也出现：

enter image description here

来源

2014-01-05 cantera

我还没看，但这应该很简单。进入dev console启用shadowdom并检查输入元素的阴影。然后你会看到箭头元素，包括他的伪类，它可以是一个伪元素，像'input :: - webkit-list-arrow'。 –

多亏了alexander farkas的评论，这里是样式规则删除箭头：

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

来源

2014-01-06 01:28:24 cantera

圣球非常感谢你。让我疯狂 – Jason

我将它与：hover和：focus选择器结合使用，只在用户点击输入时才显示。让它更明显一点，它是可选的自由文本，而不是仅下拉控件。 –

-3

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

来源

2014-01-05 18:35:24 jmore009

不幸的是，并没有删除箭头; '外观同样如此：没有' – cantera

感谢坎特拉。我不想完全摆脱黑色箭头，只是围绕它的灰色方形。

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

来源

2016-12-09 22:17:30

为什么不'background-color：transparent'？ –

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

也去掉了箭头对我来说，我发现创建一个更好的点击体验到静止点击其中的箭头会是这样，你甚至可以增加它的宽度和高度> 1EM和输入也许把一个自定义的箭头作为背景图像，箭头就是这样。

来源

2017-09-09 03:40:21 dmartins

移除Chrome中的Datalist下拉箭头

回答

相关问题