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

Question

我有一个主要针对移动用户的网站，但也针对台式机。在Mobile Safari上，使用<input type="number">效果很好，因为它会在仅包含数字的输入字段上弹出数字键盘。但是，在Chrome和Safari中，使用数字输入会在字段的右侧显示旋转按钮，这在我的设计中看起来像废话。我真的不需要按钮，因为当您仍然需要编写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

阻止旋转器出现在Opera中似乎是不可能的。作为临时的解决方法，您可以为微调器腾出空间。据我所知，以下CSS仅在Opera中添加了足够的填充：

noindex:-o-prefocus,

input[type=number] {

    padding-right: 1.2em;

}