首页 > 文章列表 > uniapp iOS 输入框显示放大镜图标如何解决?

uniapp iOS 输入框显示放大镜图标如何解决?

471 2025-04-05

uniapp iOS 输入框显示放大镜图标如何解决?

uniapp iOS 输入框放大镜图标解决方案

在uniapp开发中,使用confirm-type='search'属性的输入框,iOS真机上可能会出现一个额外的放大镜图标,而安卓和模拟器则不会。这是因为Safari浏览器为input[type=search]元素设置了默认样式。

解决方法是添加以下CSS样式,覆盖Safari的默认样式:

input[type=search] {
  -webkit-appearance: none;
}

此样式将移除Safari浏览器自带的放大镜图标。

为避免跨平台样式差异,建议使用normalize.css等样式库来统一不同浏览器默认样式,从而减少类似问题的发生。

来源:1740260503