可通过CSS伪元素隐藏iOS和Chrome中input的自动清空按钮：使用input::-webkit-search-cancel-button{display:none}，并补充input::-webkit-search-decoration等隐藏搜索图标，旧版Android可配合-appearance:none处理。
在移动端 H5 页面中，iOS 和部分 Android 浏览器（如 Chrome）会给 <input type="text"> 等可编辑输入框自动添加右侧的清空按钮（小叉号），影响 UI 一致性。可以通过 CSS 隐藏它。
使用 -webkit-search-cancel-button 伪元素（iOS / Safari / Chrome）
这是最常用、兼容性最好的方式，专门针对 WebKit 内核浏览器：
input[type="text"]::-webkit-search-cancel-button {
display: none;
}
注意：该伪元素仅在 type="search" 时原生生效，但多数 iOS/Chrome 对 type="text" 也识别并应用（尤其当有内容且获得焦点时）。为保险起见，可同时写上：
input::-webkit-search-cancel-button,
input[type="text"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-cancel-button {
display: none;
}
补充：隐藏搜索框默认图标（iOS Safari）
iOS Safari 还可能显示左侧的放大镜图标（尤其 type="search"），如需一并隐藏：
input::-webkit-search-decoration,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
display: none;
}
Android 原生浏览器兼容处理
部分旧版 Android Browser 或三星浏览器可能不支持上述伪元素。此时可尝试以下组合方案：
- 确保
input不设type="search"（除非必要），改用type="text"+ 自定义搜索逻辑 - 添加
appearance: none重置部分样式：input { -webkit-appearance: none; appearance: none; } - 极少数场景下，用透明边框+背景覆盖右侧区域（不推荐，属 hack 手段）
注意事项
这些样式仅隐藏视觉按钮，不影响输入框的正常功能（如双击选中、长按粘贴等）。清空逻辑仍需由 JS 控制（例如点击自定义清除图标时调用 input.value = '' 并触发 input 事件）。
无需 JavaScript 干预即可实现隐藏，纯 CSS 方案简洁可靠。
