在输入数字中隐藏微调器 - Firefox 29

Question

在Firefox 28上,我使用的<input type="number">作品非常棒,因为它会在输入字段上显示数字键盘,这些键盘应该只包含数字.

在Firefox 29中,使用数字输入在字段的右侧显示旋转按钮,在我的设计中看起来像垃圾.我真的不需要按钮,因为当你需要写一些类似6~10位数字的东西时它们是无用的.

是否可以使用CSS或jQuery禁用它？

Answer 1

根据这篇博客,你需要设置-moz-appearance:textfield;的input.

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

<input type="number" step="0.01"/>

Answer 2

值得指出的是-moz-appearance,这些元素的默认值是number-input在Firefox中.

如果要在默认情况下隐藏微调器,可以-moz-appearance: textfield初始设置,如果希望微调器显示在:hover/上:focus,则可以使用覆盖以前的样式-moz-appearance: number-input.

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

我认为有人可能会觉得有帮助,因为我最近不得不这样做以尝试提高Chrome/FF之间的一致性(因为这是Chrome中默认数字输入的行为方式).

如果要查看所有可用值-moz-appearance,可以在此处找到它们(mdn).

Answer 3

在SASS/ SCSSstyle中,你可以像这样写:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

这个代码风格绝对可以使用PostCSS.

Answer 4

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


/* for mozilla */  
   input[type=number] {-moz-appearance: textfield;}