Html 使用 css 类隐藏 HTML5 输入类型数字箭头？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33749896/
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
Hide HTML5 input type number arrow with a css class?
提问by Jonathan Solorzano
I've seen this question asked before in here Can I hide the HTML5 number input's spin box?, and some others have asked with a specific request for a Browser, in my case what i want to know is: Is there a way to create a css class like .no-spinto hide the spin arrows across browsers?
我之前在这里看到过这个问题我可以隐藏 HTML5 数字输入的旋转框吗？，还有一些人提出了对浏览器的特定请求，在我的情况下，我想知道的是：有没有办法创建一个 css 类，比如.no-spin在浏览器中隐藏旋转箭头？
I tried:
我试过：
.no-spin {
-webkit-appearance: none;
margin: 0;
-moz-appearance:textfield;
}
But no luck, I don't really know that much about css in fact...
但不幸的是，事实上我对 css 的了解并不多......
回答by Abs
Answer
回答
.no-spin::-webkit-inner-spin-button, .no-spin::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0 !important;
}
.no-spin {
-moz-appearance:textfield !important;
}<input type="number" class="no-spin"/>Edit:Placing the "-moz-appearance" declaration inside the ".no-spin::-webkit" selector will not work in Firefox, as of 2020. To get this to work in all browsers, the "-moz-appearance" declaration must be placed in a new class selector, that is just ".no-spin" by itself.
编辑：自 2020 年起，将“ -moz-appearance”声明放在“ .no-spin::-webkit”选择器中将无法在 Firefox 中工作。要使其在所有浏览器中工作，“-moz-appearance”声明必须放在一个新的类选择器中，它本身就是“.no-spin”。
w3schools reference: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp
w3schools 参考：https: //www.w3schools.com/howto/howto_css_hide_arrow_number.asp
回答by Cr1xus
You can try just in your html
你可以在你的 html 中尝试
<input type="text" pattern="[0-9]">
or if you really want to keep it as number, although as security doesn't change anything maybe try in your css this:
或者，如果您真的想将其保留为数字，尽管安全性不会改变任何内容，请尝试在您的 css 中执行以下操作：
.no-spin, .no-spin:hover, no-spin:focus {
-webkit-appearance: none;
margin: 0;
-moz-appearance:textfield;
}
