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

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

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

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

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

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

我发现答案的第二部分。

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

这固定了它:

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

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

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

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

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

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

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