在inputtypes=“数字”上禁用webkit的旋转button？

我有一个网站，主要是为移动用户，但也是桌面。

在移动版Safari上，使用<input type="number">工作效果很好，因为它在input字段中只显示数字键盘。

然而在Chrome和Safari中，使用数字input在字段的右侧显示旋转button，这在我的devise中看起来像垃圾。 我真的不需要button，因为无论如何，当你需要写一个6位数字的东西时，它们是无用的。

是否有可能禁用此-webkit-appearance或其他一些CSS技巧？ 我已经尝试没有太多的运气。

Answer 1

下面的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; } 

Answer 2

我发现答案的第二部分。

第一部分帮助了我，但是我仍然在我的type=numberinput的右侧有一个空格。 我已经清除了input的余量，但显然我必须将微调边上的余量清零。

这固定了它：

 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } 

Answer 3

不知道这是否是最好的办法，但这使得纺纱厂在Chrome 8.0.552.5 dev上消失：

 input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } 

Answer 4

似乎不可能阻止纺纱人在Opera中出现。 作为临时解决方法，您可以为纺纱人腾出空间。 据我所知，下面的CSS只添加了足够的填充，只在Opera中：

 noindex:-o-prefocus, input[type=number] { padding-right: 1.2em; } 

Answer 5

你也可以用以下技巧隐藏微调：

 input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { opacity:0; pointer-events:none; }