<input type =“”search“”/>不再显示firefox下的取消按钮（x）

Question

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

Answer 1

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

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

Answer 2

虽然在密码笔中可以看到已接受的答案有效， 我觉得有必要解释一下它是如何工作的以及应注意的事项。 由于花了我很多时间才能使其按预期工作。

1. 对于任何想知道type="reset"清除工作原理的人来说都是如此。
   Read more about it here

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

1. 这使我们进入需要注意的第二点。 正如Dox解释的那样，类型重置的输入或按​​钮仅在表单内起作用。但是，当一个表单中有多个输入时，这会产生问题，因为所有输入都会被重置。
   事实是，在固定了firefox上的清除按钮的同时，这将在所有其他支持它的浏览器中产生多个清除按钮。

2. 一个小功能是CSS内容还接受url()。例如，这意味着自定义svg可以用作清除图标。