如何在 NUMBER 类型的 Chrome INPUT 中显示 X（清除）？答案

【问题标题】：How to show X (Clear) in Chrome INPUT with type NUMBER?如何在 NUMBER 类型的 Chrome INPUT 中显示 X（清除）？
【发布时间】：2015-11-25 13:16:23
【问题描述】：

我创建了一个使用数字类型输入的应用程序：

<input type="number" min="-1000000" max="1000000" step="0.01">

在 IE 中，它的右侧有一点“清除”或 [X]。我的用户发现这非常有价值，因为他们在这些字段中输入了大量数字，并且通常喜欢通过单击将其清除。

事实证明，一些用户更喜欢 Chrome 作为他们的浏览器。然而，在 Chrome 中，此文本框显示一个“微调器”，它是一个向上/向下箭头。这在这里没有用，因为他们不会将这些大数字增加 1 美分来达到目标。

我能够搜索并找到有关如何在 chrome 中隐藏“微调器”的信息，并且我还看到搜索输入框可能会给我我正在寻找的 [X]，但代价是丢失了内置对数字类型的支持。

我找不到在 Chrome 数字输入字段中指定 [X]/Clear 的任何方法。

我能想到的唯一选择是使用 CSS 隐藏微调器（我认为这可以做到），并在右侧添加我自己的按钮，使用 JS 清除文本框。在我这样做之前，想知道我是否错过了一个技巧。

另一个似乎不太吸引人的选项是将我的文本框转换为类型搜索，然后手动添加所有手动数字检查 JS 逻辑。

谢谢！

【问题讨论】：

这些是浏览器的默认渲染样式。而且我认为您不能替换 chrome 中的向上和向下箭头键

标签： javascript jquery css input textbox

【解决方案1】：

似乎这对于纯 CSS 是不可能的，因为当您检查该元素的 shadow dom 时，没有这样的元素可用。但是，您始终可以使用 JS。

【讨论】：

【解决方案2】：

这将在 chrome 中工作：

input[type="search"] {
  -webkit-appearance: searchfield;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

【讨论】：

你在type="number"的地方成功了吗？
它不应该在没有任何前缀的情况下开箱即用吗？
有趣的是，我需要不显示“x”，从type="search" 切换到"input" 是有效的。