在输入类型="数字"上禁用webkit的旋转按钮？

Question

我有一个主要面向移动用户的网站,但桌面也是如此.

在Mobile Safari上,使用<input type="number">效果很好,因为它会在输入字段上显示数字键盘,这些键盘应该只包含数字.

但是在Chrome和Safari中,使用数字输入会在字段的右侧显示旋转按钮,这在我的设计中看起来像垃圾.我真的不需要按钮,因为当你需要写一个像6位数字的东西时它们是无用的.

是否有可能禁用此功能-webkit-appearance或其他一些CSS技巧？我试过没有太多运气.

Answer 1

我发现答案中有第二部分.

第一部分帮助了我,但我的type=number输入右边仍有一个空格.我已经将输入上的边距归零,但显然我不得不将旋转器上的边距归零.

这解决了它:

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

Answer 2

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