如何在NUM IN类型的Chrome INPUT中显示X(清除)？

Question

我创建了一个使用类型为number的输入的应用程序:

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

在IE中,右侧有一点"清晰"或[X].我的用户发现这非常有价值,因为他们在这些字段中输入大量数字,并且经常喜欢通过点击清除它们.

事实证明,有些用户更喜欢将Chrome作为浏览器.但是,在Chrome中,此文本框显示"微调器",这是一个向上/向下箭头.这在这里毫无用处,因为他们不会将这些大数字增加1美分来达到目标​​.

我能够搜索并找到有关如何隐藏chrome中"spinner"的信息,我还看到一个搜索输入框可能会给我[X]我正在寻找,但代价是失去内置支持对于数字类型.

我无法找到任何方法在Chrome编号INPUT字段中指定[X] /清除.

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

另一个看起来不太吸引人的选择是将我的文本框转换为类型搜索,然后手动添加所有手动数字检查JS逻辑.

谢谢!

Answer 1

这将适用于chrome:

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

Answer 2

看起来这对于纯 CSS 来说是不可能的，因为当你检查该元素的 Shadow dom 时，没有这样的元素可用。不过你总是可以使用 JS。