css 删除Chrome中的数据列表下拉箭头

pokxtpni 于 2022-12-27 发布在其他

关注(0)|答案(8)|浏览(272)

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

- 更新日期：**

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

css

来源：https://stackoverflow.com/questions/20937475/remove-datalist-dropdown-arrow-in-chrome

8条答案

按热度按时间

laik7k3q1#

感谢alexander farkas的注解，下面是删除箭头的样式规则：

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

赞(0）回复(0）举报 2022-12-27

ma8fv8wu2#

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

要删除 * 仅 * 数据列表输入，则为：

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

赞(0）回复(0）举报 2022-12-27

dzjeubhm3#

多亏了坎特拉，我不想把黑色箭头完全去掉，只想去掉它周围的灰色方块。

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

赞(0）回复(0）举报 2022-12-27

deyfvvtc4#

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

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

赞(0）回复(0）举报 2022-12-27

jxct1oxe5#

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

这是我的工作（使用显示：0不适用于chrome）

赞(0）回复(0）举报 2022-12-27

dy1byipe6#

datalist::-webkit-calendar-picker-indicator {
    display: none; 
    opacity: 0;
}

这是好的，但这个css代码将隐藏任何日历页面上。就像我使用日期选择日历，这也将隐藏包括数据列表和日期时间选择器的控件。

赞(0）回复(0）举报 2022-12-27

cbeh67ev7#

设置父***输入***的***列表***选项为空，<input list="" ... />，例如：

<input
  list=""
  name="option"
  id="input"
  autocomplete="off"
>

<datalist id="datalist">
  <option>Carrots</option>
  <option>Peas</option>
  <option>Beans</option>
</datalist>

参见mdn自定义_datalist_样式示例

赞(0）回复(0）举报 2022-12-27

yacmzcpb8#

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

赞(0）回复(0）举报 2022-12-27