输入类型搜索隐藏图标 [英] input type search hide the icons

问题描述

在 chrome 中，当我在搜索字段中输入时，会出现一个 cross，它会在点击时清除该字段(也可以使用 Esc 来实现).

有没有办法隐藏这个十字架?

<小时>

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

解决方案

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 {显示:无；}

让我知道这是否有帮助

对于您的案例使用:

input[type=search"]::-webkit-search-cancel-button {显示:无；}

input[type="search"]::-webkit-search-cancel-button {显示:无；}

In chrome, when I type in a search field, there appears a cross which clears the field when clicked (one can also use Esc for this).

  <input type="search">

Is there any way to hide this cross?

---

EDIT:

If you use attribute results="2", it starts showing a magnifying glass too. what kind of sorcery is this? Why does the glass shows up when I use the results attribute?

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

解决方案

Sourabh you will need to disable WebKit’s proprietary pseudo elements

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;
}

Let me know if this helps

For your case use:

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

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

<input type="search">

这篇关于输入类型搜索隐藏图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！