如何解决HTML5 Datalist原生箭头在移动端浏览器无法隐藏的问题

桌面端生效的::-webkit-calendar-picker-indicator规则在移动端不生效，是因为移动端WebKit内核（iOS Safari、安卓Chrome等）有单独的datalist控件伪元素实现，且默认样式优先级更高，用以下CSS可实现全端兼容：

/* 限定仅作用于绑定了datalist的输入框，避免影响日期、时间类输入控件 */
input[list]::-webkit-calendar-picker-indicator {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
}

/* 兼容iOS Safari独有的datalist按钮伪元素 */
input[list]::-webkit-list-button {
  display: none !important;
  opacity: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* 兜底移除部分旧安卓设备渲染的背景箭头 */
input[list] {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: none !important;
}

规则说明 #

• 移动端用户代理样式优先级更高，加!important可强制覆盖默认样式
• ::-webkit-list-button是iOS Safari专属的datalist下拉箭头伪元素，桌面端无该属性，必须单独配置隐藏规则
• 选择器增加[list]限定，不会干扰其他输入类型的原生控件样式
• 配置完成后可直接给input[list]自定义背景图、伪元素实现自定义chevron图标，不会和原生控件冲突

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