如何隐藏搜索框中自带的放大镜与清除按钮

发表于 更新于 分类于 阅读次数： Disqus：
记录有关如何隐藏搜索框在浏览器中自带按钮的内容

前情提要

在有搜索功能的页面，测试希望搜索时，键盘的确认按钮能是“搜索”，然后便有了这次记录。

如何做

<input> 输入框的 type 属性有一个 search，有对搜索相关的优化支持，其中就包括使键盘的确认按钮显示为“搜索”。

嗯，功能是解决了，但随之而来的是另一个问题，那就是搜索框自带的前面的放大镜按钮🔍和后面的清除按钮×。
前面的放大镜可能是Safari中才有，但后面的清除按钮大部分浏览器中都存在。对搜索框而言，这本是一个好的东西，但是在实际项目中，基本都有各自的UI样式，这些内容反而是需要去除的。
因此我只能在网上查找如何去除它们。

去除搜索框自带按钮

然后我找到了 解决方案

1
2
3
4
5
6
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;
}

参考链接

  • 怎么删除搜索框左边的搜索按钮