html - 输入类型搜索隐藏图标

Question

在 chrome 中，当我在搜索字段中键入内容时，会出现一个叉号，点击它会清除该字段(也可以使用 Esc 来实现)Esc。

  <input type="search">

有什么办法可以隐藏这个十字吗？

---

编辑:

如果您使用属性 results="2"，它也会开始显示放大镜。这是什么魔法？为什么在我使用 results 属性时会出现玻璃杯？

<input type="search" results="2">

Answer 1

Sourabh 你需要禁用 WebKit 的专有伪元素

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

如果有帮助请告诉我

对于您的案例使用:

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

input[type="search"]::-webkit-search-cancel-button {
  display: none;
}

<input type="search">