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

Question

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

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

但是，在Chrome和Safari中，使用数字输入会在字段的右侧显示旋转按钮，这在我的设计中看起来像废话。我真的不需要按钮，因为当您仍然需要编写6位数字之类的东西时，它们是无用的。

是否可以通过-webkit-appearance其他CSS技巧来禁用此功能？我尝试了很多运气。

Answer 1

下面的CSS适用于Chrome和Firefoxinput[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;}