<input type=“search”> 在 firefox 下不再显示取消按钮 (x)答案

【问题标题】：<input type=“search”> no longer shows cancel button (x) under firefox<input type=“search”> 在 firefox 下不再显示取消按钮 (x)
【发布时间】：2016-06-15 21:23:51
【问题描述】：

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

【问题讨论】：

标签： html

【解决方案1】：

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

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

【讨论】：

谢谢！你知道怎么做吗？
@ZichenMa 我已将链接添加到我的答案中。如果真的对您有帮助，请使用投票。谢谢。
非常感谢！这正是我想要的，但是当我将代码复制到一个空白的 html 页面中时，在 Firefox 中，我需要将鼠标移到左边一点，然后我才能删除内容。但是，它在谷歌浏览器中运行完美。
@ZichenMa 您可能需要对 CSS 进行一些更改。如果您发布代码会更好，然后我们可以处理它。不要忘记投票 ;-)
这个答案只有一个问题，只有当它是表单中的唯一输入时才有效。否则每个字段都会被清除。

【解决方案2】：

虽然可以在 codepen 中看到已接受的答案有效，但我觉得有必要解释这是如何工作的以及需要注意什么。因为我花了很长时间才让它按预期工作。

对于任何想知道清除是如何工作的人，type="reset" 是造成这种情况的原因。
Read more about it here

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

这将我们带到需要注意的第二点。正如 dox 解释的那样，类型重置的输入或按钮只能在表单中使用。但是，当表单中有多个输入时，这会产生问题，因为所有输入都将被重置。
另一个漏洞是这样的事实，即在修复 Firefox 上的清除按钮时，现在将在所有其他支持它的浏览器中生成多个清除按钮。
一个小特点是css内容也接受url()。这意味着例如自定义 svg 可以用作清晰的图标。

【讨论】：