javascript 如何在类型为 NUMBER 的 Chrome INPUT 中显示 X（清除）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32312348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show X (Clear) in Chrome INPUT with type NUMBER?
提问by enforge
I created an application that uses an input, of type number:
我创建了一个应用程序，该应用程序使用类型为 number 的输入：
<input type="number" min="-1000000" max="1000000" step="0.01">
In IE, this has a little "clear" or [X] on the right side. My users find this very valuable because they enter large numbers in these fields, and often like to clear them out with a click.
在 IE 中，这在右侧有一点“清晰”或 [X]。我的用户发现这非常有价值，因为他们在这些字段中输入了大量数字，并且通常喜欢通过单击将它们清除。
It turns out that some of the users prefer Chrome as their browser. In Chrome, however, this text box shows a "spinner", which is an up/down arrow. This is of no use here because they aren't going to increment these large numbers by 1 cent to reach a target.
事实证明，一些用户更喜欢 Chrome 作为他们的浏览器。然而，在 Chrome 中，此文本框显示一个“微调器”，它是一个向上/向下箭头。这在这里没有用，因为他们不会将这些大数字增加 1 美分来达到目标。
I was able to search and find info on how to hide the "spinner" in chrome, and I also saw that a search input box might give me the [X] I was looking for, but at the cost of losing the built in support for number type.
我能够搜索并找到有关如何在 chrome 中隐藏“微调器”的信息，而且我还看到搜索输入框可能会给我我正在寻找的 [X]，但代价是失去了内置支持对于数字类型。
I wasn't able to find any way to specify an [X]/Clear in Chrome number INPUT fields.
我找不到在 Chrome 数字 INPUT 字段中指定 [X]/Clear 的任何方法。
The only option I can think of is hiding the spinner using CSS (I think this can be done), and adding my own button to the right instead, using JS to clear out the textbox. Before I do this, wondering if there was a trick I missed.
我能想到的唯一选择是使用 CSS 隐藏微调器（我认为可以做到），然后在右侧添加我自己的按钮，使用 JS 清除文本框。在我这样做之前，想知道是否有我错过的技巧。
The other option, which seems less appealing, would be to convert my text boxes to type search, and then add all of the manual number checking JS logic by hand.
另一个似乎不太吸引人的选项是将我的文本框转换为类型搜索，然后手动添加所有手动数字检查 JS 逻辑。
Thanks!
谢谢！
回答by Rameshkumar Nagapuri US
This will work in chrome:
这将在 chrome 中工作：
input[type="search"] {
-webkit-appearance: searchfield;
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
}
回答by llamerr
Seems like this is not possible with pure CSS, since when you inspect shadow dom for that element there's no such element available. However you can always use JS.
似乎这在纯 CSS 中是不可能的，因为当您检查该元素的 shadow dom 时，没有这样的元素可用。但是，您始终可以使用 JS。
