在输入类型=“数字”上禁用Webkit的旋转按钮？

我有一个主要针对移动用户的网站，但也针对台式机。

在Mobile Safari上，使用<input type="number">效果很好，因为它会在只能包含数字的输入字段上弹出数字键盘。

但是，在Chrome和Safari中，使用数字输入会在字段的右侧显示旋转按钮，这在我的设计中看起来像废话。我真的不需要按钮，因为当您仍然需要编写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=number输入内容的右侧仍然有一个空格。我已经将输入的余量清零了，但是显然我也不得不将微调器的余量清零了。

这修复了它：

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;
}