该×按钮是浏览器对type="text"或type="search"输入框的原生增强功能，与datalist无关；它在输入内容且获焦时显示，点击清空value，由::-webkit-search-cancel-button（Chromium）和::-ms-clear（IE/Edge Legacy）控制。
input 关联 datalist 时的清除叉号来自哪里
这个 × 按钮不是
- Firefox 默认不显示该叉号
- IE/Edge Legacy 用
::-ms-clear控制 - Chromium 系统（Chrome、新版 Edge、Opera）用
::-webkit-search-cancel-button（注意：不是::-webkit-calendar-picker-indicator，后者管下拉箭头）
如何用 CSS 彻底隐藏这个 × 叉号
只需一组兼容性足够的伪元素规则，无需 JS：
- 对 Chromium：
input::-webkit-search-cancel-button { appearance: none; } - 对 IE/Edge Legacy：
input::-ms-clear { display: none; } - 不需要处理 Firefox，它本来就不显示
注意两点：
-
appearance: none比display: none更稳妥，避免某些版本中残留空白间隙 - 这些规则必须作用于具体
input元素，不能只写input[list] {}——因为叉号行为与list无关，加了也白加
input[type="text"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-cancel-button {
appearance: none;
}
input[type="text"]::-ms-clear,
input[type="search"]::-ms-clear {
display: none;
}为什么加了 CSS 还是能看到叉号
常见原因有三个：
立即学习“前端免费学习笔记（深入）”；
- 选择器没命中：比如用了
input.list-input::-webkit-search-cancel-button，但实际 HTML 中没加class="list-input" - 样式被覆盖：外部 CSS 或框架（如 Bootstrap）重置了
appearance，需加!important（仅当确认无其他办法时） - 输入框 type 不是
text或search：例如用了type="string"（非法值）或没写 type，默认为text，但部分旧版 Safari 可能不触发叉号逻辑
如果目标是“完全禁用清除行为”，CSS 隐藏只是视觉层；若还需阻止用户手动清空，得监听 input 事件并拦截退格/删除键逻辑——但那属于交互控制，和叉号本身无关。
要不要连带去掉右侧下拉箭头
可以，但这是独立问题。那个箭头由 ::-webkit-calendar-picker-indicator 控制，和叉号互不影响。如果你同时看到 × 和 ▼，要分别处理：
- ×：用上面的
::-webkit-search-cancel-button+::-ms-clear - ▼：加
input[list]::-webkit-calendar-picker-indicator { appearance: none; }
别混用，否则容易漏掉一种。很多开发者以为删了箭头就自动没了叉号，其实它们底层机制完全不同。
真正容易被忽略的是：你改的不是 datalist，而是一个普通 input 的浏览器默认 UI 增强行为；哪怕把 datalist 删除，叉号依然存在。
