清除按钮是Chrome/Edge对type="text"输入框的默认UI行为，与datalist无关；需用CSS伪元素隐藏：input[list]::-webkit-search-cancel-button、::-webkit-clear-button、::-ms-clear；Firefox无需处理，隐藏后需自行提供清空逻辑。
input + datalist 为什么会出现清除按钮
Chrome 和 Edge 在 <input list="xxx"> 场景下，只要输入框有内容且获得过焦点，右端就会自动显示一个 × 清除按钮。这不是你写的，是浏览器对 type="text"（或未显式声明 type）的默认 UI 行为，和 datalist 本身无关，但常被误认为是 datalist 的副作用。
用 CSS 隐藏 input 的清除按钮（Chrome/Edge）
清除按钮属于伪元素，不同浏览器前缀不同，必须同时覆盖：
input[list]::-webkit-search-cancel-button {
display: none;
}
input[list]::-webkit-clear-button {
display: none;
}
input[list]::-ms-clear {
display: none;
}
注意：input[list] 比单纯写 input 更精准，避免误杀其他输入框；::-ms-clear 对旧版 Edge 有效，新版 Edge（Chromium 内核）主要靠前两个。
隐藏后要注意的兼容性问题
- Firefox 不渲染该清除按钮，无需处理
- 隐藏后用户无法一键清空，需自行提供清空逻辑（比如加个
<button>调用input.value = ''） - 如果 input 同时设置了
type="search"，即使没 list 也会触发清除按钮，此时应改用type="text"并确保list属性存在，否则 datalist 不生效 - 某些 Android WebView 或老版本 iOS Safari 可能忽略这些伪元素规则，实际测试时建议真机验证
为什么不能用 JavaScript 禁用清除行为
清除按钮没有对应的标准事件（如 click 无法捕获它），也无法通过 disabled 或 readonly 控制。试图监听 input 事件并重置值会引发闪烁或光标跳变，属于反模式。CSS 隐藏是唯一稳定、无副作用的方案。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的是：清除按钮的显示逻辑依赖于浏览器对“可编辑文本输入”的判定——哪怕加了 list，只要没设 type，部分浏览器仍按 type="text" 处理；而设成 type="search" 会强制启用清除按钮，且无法通过 datalist 正常补全（规范不保证兼容）。所以 type 必须明确为 text，list 属性必须匹配真实 <datalist id="xxx"> 的 id。
