无法通过 datalist 的 id 去除下拉箭头，因箭头属于 input[list] 的原生 UI；需用 appearance: none 和 ::-webkit-calendar-picker-indicator 等 CSS 隐藏，但不影响 datalist 功能。
datelist 默认下拉箭头无法通过 id 绑定去除
HTML 的 <datalist> 本身不渲染为可见控件，它只是提供选项数据源；真正显示“带箭头输入框”的是 <input list="xxx">，而那个双击/点击才展开的下拉箭头，属于浏览器对 type="text"（或未指定 type）+ list 属性的原生 UI 行为，跟 <datalist> 的 id 是否设置、是否匹配完全无关——id 只是用来被 input 的 list 属性引用，不控制样式。
隐藏 input 原生下拉箭头的 CSS 方法有限但有效
这个箭头不是标准伪元素，不同浏览器实现方式不同，但可通过以下组合覆盖：
- Chrome / Edge：用
::webkit-calendar-picker-indicator伪元素设display: none - Firefox：不支持直接隐藏，但把
input设为list后，其行为类似普通文本框，无固定箭头；若仍见小图标，可能是系统主题或扩展注入，CSS 无效 - Safari：从 iOS 16.4 / macOS Ventura 起支持
::webkit-listbox-decoration，但更可靠的是用appearance: none+ 覆盖所有已知伪元素
推荐写法：
input[list] {
appearance: none;
-webkit-appearance: none;
}
input[list]::-webkit-calendar-picker-indicator {
display: none;
}
input[list]::-webkit-inner-spin-button,
input[list]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
注意：隐藏箭头 ≠ 禁用 datalist 功能
只要 input 有 list 属性且值匹配 <datalist id="xxx"> 的 id，自动补全和键盘上下键选择就依然生效。隐藏箭头只是视觉移除，不影响数据绑定逻辑或键盘交互。
立即学习“前端免费学习笔记（深入）”；
- 用户仍可按
Alt+↓（Windows）或Ctrl+Space（macOS）手动触发下拉 - 移动端点击输入框仍会唤起候选列表（iOS/Android 原生键盘行为）
- 若彻底禁用下拉，应移除
list属性，而非只靠 CSS 隐藏
兼容性与真实限制必须清楚
<datalist> 的选项匹配是前缀匹配、区分大小写、且不支持模糊搜索或自定义过滤——这些都不是 CSS 能改的。所谓“去除箭头”只是表层，如果业务需要无箭头 + 完全可控的下拉体验（比如支持拼音检索、分组、异步加载），<datalist> 就不适合，得换用 <select> 或基于 div+input 的自定义组件。
最容易被忽略的一点：Firefox 不渲染箭头，但也不支持 input[list] 的键盘方向键选择（仅支持鼠标点击选项），这个行为差异不会因 CSS 改变。
