HTML5搜索输入放大镜覆盖？

Question

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

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

谢谢！

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”