删除Chrome中的Datalist下拉箭头
can*_*era 45 html css html5 google-chrome
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">
更新:
当字段悬停(不仅仅是聚焦)时,箭头也会出现,不幸的是,当按钮本身悬停时,它也有自己的背景颜色:
can*_*era 86
感谢alexander farkas的评论,这是删除箭头的样式规则:
input::-webkit-calendar-picker-indicator {
display: none;
}
- 如果没有 `!important` 规则，则无法在 Chrome 91 及更高版本中工作 (23认同)
- 圣球非常感谢你.快把我逼疯了 (4认同)
- 警告这也会影响 html5 日期输入类型。`[list]::-webkit-calendar-picker-indicator` 仅删除数据列表。 (4认同)
- 对于 IOS，选择器是 `::-webkit-list-button` (3认同)
- 最后添加 !importantis 现在正在工作（chrome 版本 97） (2认同)
jno*_*and 17
正如其他人提到::-webkit-calendar-picker-indicator { display: none }的移除箭头的工作，它也会影响 html5 日期选择器<input type="date">，
要删除仅删除 datalist 输入将是：
[list]::-webkit-calendar-picker-indicator {
display: none;
}
- 2021年好像不行了。 (7认同)
小智 8
感谢Cantera.我不想完全摆脱黑色箭头,只是围绕它的灰色方块.
input::-webkit-calendar-picker-indicator {
background-color: inherit;
}
- 为什么不使用“背景颜色：透明”？ (2认同)
小智 5
input::-webkit-calendar-picker-indicator {
opacity: 0;
}
还为我删除了箭头，我发现创建了更好的单击体验，仍然可以单击箭头所在的位置，您甚至可以将其宽度和高度增加 > 1em，并且可以在输入中放置自定义箭头作为背景图像，箭头所在的位置。