HTML5搜索输入放大镜覆盖？

Question

我在我的网站上使用HTML5搜索输入，在某些浏览器中正在渲染放大镜（Safari / Chrome），而在其他浏览器中则不是（Firefox / IE）。如何覆盖默认的放大镜图标，以便我可以为每个浏览器编写自定义搜索图标？

将输入类型切换为文本无法正常工作，因为我希望用户在输入搜索后能够点击输入。

谢谢！

Answer 1

重置webkit样式：

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

还要隐藏＆＃34;清除＆＃34;按钮：

::-webkit-search-cancel-button { display: none; }

修改

这里有一些（不好的）文档：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html

您必须向下滚动/搜索＆＃34; -webkit-appearance＆＃34;