Html 在 input type="number" 上禁用 webkit 的旋转按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3975769/
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
Disable webkit's spin buttons on input type="number"?
提问by pojo
I have a site which is primarily for mobile users but desktop too.
我有一个主要面向移动用户但也面向桌面用户的网站。
On Mobile Safari, using <input type="number">works great because it brings up the numerical keyboard on input fields which should only contain numbers.
在 Mobile Safari 上，使用<input type="number">效果很好，因为它会在应该只包含数字的输入字段上显示数字键盘。
In Chrome and Safari however, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6-digit number anyway.
然而，在 Chrome 和 Safari 中，使用数字输入会在字段右侧显示旋转按钮，这在我的设计中看起来很糟糕。我真的不需要按钮，因为无论如何当您需要编写类似 6 位数字的内容时，它们是无用的。
Is it possible to disable this with -webkit-appearanceor some other CSS trick? I have tried without much luck.
是否可以使用-webkit-appearance或其他一些 CSS 技巧来禁用它？我试过没有太多运气。
采纳答案by Rolwin Crasta
The below css works for both Chrome and Firefox
以下 css 适用于 Chrome 和 Firefox
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
回答by Bob Spryn
I discovered that there is a second portion of the answer to this.
我发现这个答案还有第二部分。
The first portionhelped me, but I still had a space to the right of my type=numberinput. I had zeroed out the margin on the input, but apparently I had to zero out the margin on the spinner as well.
第一部分帮助了我，但我的type=number输入右侧仍然有一个空格。我已经将输入的边距归零，但显然我也必须将微调器的边距归零。
This fixed it:
这修复了它：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
回答by robertc
Not sure if this is the best way to do it, but this makes the spinners disappear on Chrome 8.0.552.5 dev:
不确定这是否是最好的方法，但这会使 Chrome 8.0.552.5 dev 上的微调器消失：
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
}
回答by Goulven
It seems impossible to prevent spinners from appearing in Opera. As a temporary workaround, you can make room for the spinners. As far as I can tell, the following CSS adds just enough padding, only in Opera:
似乎不可能阻止旋转器出现在 Opera 中。作为临时解决方法，您可以为微调器腾出空间。据我所知，以下 CSS 仅在 Opera 中添加了足够的填充：
noindex:-o-prefocus,
input[type=number] {
padding-right: 1.2em;
}
回答by Sébastien Varinois
You can also hide spinner with following trick :
您还可以使用以下技巧隐藏微调器：
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity:0;
pointer-events:none;
}
