<input type="search"> 在 Firefox 下不再显示取消按钮 (x)

Question

我发现<input type=“search”>它只适用于 Chrome 和 IE，但不适用于 Firefox。如何<input type=“search”>在 Firefox 中显示取消按钮 (x)？

Answer 1

Webkit 衍生浏览器放入 x 以清除值。火狐没有。然而，firefox 支持此功能，但它没有做任何事情，您需要自己设置样式以在 Firefox 中显示 X 按钮。

以下链接将帮助您实现目标： HTML Textbox with a clear button in Pure CSS and without JavaScript

Answer 2

虽然已接受的答案正在起作用，正如在 codepen 中看到的那样，但我觉得有必要解释一下它是如何工作的以及需要注意什么。因为我花了相当长的时间才让它按预期工作。

1. 对于任何想知道透明是如何工作的人来说type="reset"是如何造成这种情况的。
   在这里阅读更多相关信息

重置类型的元素呈现为按钮，并具有默认的单击事件处理程序，该处理程序将表单中的所有输入重置为其初始值。

2. 这就引出了我们要注意的第二点。正如文档所解释的，重置类型的输入或按​​钮只能在表单中使用。但是，当表单中有多个输入时，这会产生问题，因为所有输入都将被重置。
   另一个需要注意的是，虽然修复了 Firefox 上的清除按钮，但现在将在所有其他支持它的浏览器中生成多个清除按钮。

3. 一个小特点是 css 内容也接受url(). 这意味着例如自定义 svg 可以用作清晰的图标。