在 WebKit 内核的浏览器中，当 input 元素的类型为 "search" 时，通常会显示一个搜索图标在输入框中。这个图标是浏览器内置的默认行为，旨在提供更好的搜索体验。然而，如果你希望移除或修改这个搜索图标，可以采取以下方法：

CSS 样式调整：使用 CSS 来调整搜索图标的显示样式。通过使用自定义样式覆盖默认样式，可以隐藏或修改搜索图标的外观。例如，通过设置 background-image 属性为 none，或者通过设置 background 属性为其他图标来替换默认的搜索图标。代码如下

input[type="search"]::-webkit-search-decoration,

input[type="search"]::-webkit-search-cancel-button {

  display: none;
  
}

JavaScript 操作：通过 JavaScript 操作 DOM 元素，可以动态地修改 input 元素的属性来控制搜索图标的显示与隐藏。可以使用 JavaScript 选择器选中输入框，并设置相应的属性来解决多个搜索图标显示的问题。

const searchInput = document.querySelector("input[type='search']");

searchInput.setAttribute("display", "none");

在 WebKit 内核的浏览器中，当 input 元素的类型为 "search" 时，通常会显示一个搜索图标在输入框中。这个图标是浏览器内置的默认行为，旨在提供更好的搜索体验。然而，如果你希望移除或修改这个搜索图标，可以采取以下方法：

CSS 样式调整：使用 CSS 来调整搜索图标的显示样式。通过使用自定义样式覆盖默认样式，可以隐藏或修改搜索图标的外观。例如，通过设置 background-image 属性为 none，或者通过设置 background 属性为其他图标来替换默认的搜索图标。代码如下

input[type="search"]::-webkit-search-decoration,

input[type="search"]::-webkit-search-cancel-button {

  display: none;
  
}

JavaScript 操作：通过 JavaScript 操作 DOM 元素，可以动态地修改 input 元素的属性来控制搜索图标的显示与隐藏。可以使用 JavaScript 选择器选中输入框，并设置相应的属性来解决多个搜索图标显示的问题。

const searchInput = document.querySelector("input[type='search']");

searchInput.setAttribute("display", "none");