如何隐藏datalist组件自带的下拉箭头？

你之前用的::-webkit-search-decoration是针对搜索框的装饰元素，和datalist的下拉箭头完全不搭边，所以没效果很正常。

要去掉datalist旁边的箭头，得针对不同浏览器的伪元素来处理，直接用下面的代码：

/* 先重置输入框的默认外观，避免浏览器自带样式干扰 */
input[list] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Chrome、Edge、Safari等webkit内核浏览器 */
input[list]::-webkit-calendar-picker-indicator {
  display: none;
}

/* Firefox浏览器 */
input[list]::-moz-list-bullet {
  display: none;
}

简单说下逻辑：

• input[list]专门选中所有关联了datalist的输入框，比按类型选择更精准
• webkit内核浏览器里，datalist的箭头复用了日历选择器的伪元素，所以用::-webkit-calendar-picker-indicator隐藏
• Firefox里对应的伪元素是::-moz-list-bullet，直接隐藏就能解决

如果还是没效果，可以试试把display: none换成opacity: 0或者visibility: hidden，部分浏览器的伪元素对display属性的支持可能有差异。

内容的提问来源于stack exchange，提问作者viktor