HTML5搜索输入放大镜覆盖？

Question

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

将输入类型切换为文本将不起作用，因为我希望用户在输入搜索后能够单击输入。

谢谢！

Answer 1

重置webkit样式：

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

要隐藏“清除”按钮：

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

编辑

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

你必须向下滚动/搜索“-webkit-appearance”