在SASS/SCSS风格中，你可以这样写:

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

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

当然，这种代码风格可以在PostCSS中使用。

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

Firefox更新到29.0.1后也面临同样的问题，这也列在这里 https://bugzilla.mozilla.org/show_bug.cgi?id=947728

解决方案: 他们(Mozilla的家伙们)通过为<input type="number">引入"-moz-appearance"支持来解决这个问题。 你只需要有一个与输入字段相关联的样式"-moz-appearance:textfield;"。

我更喜欢CSS方式 例如:-

.input-mini{
-moz-appearance:textfield;}

Or

你也可以内联执行:

<input type="number" style="-moz-appearance: textfield">

我从上面的答案和如何在Opera中删除输入[type="number"]中的箭头中混合了一些答案 scss:

input[type=number] {
  &,
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari

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

如果你想在默认情况下隐藏微调器，你可以设置-moz-appearance: textfield，如果你想让微调器出现在:hover/:focus上，你可以用-moz-appearance: number-input覆盖之前的样式。

输入(type = "数量"]{ -moz-appearance:文本框; ｝ 输入(type = "数量"]:徘徊, 输入(type = "数量"]:专注{ -moz-appearance:输入数字; ｝ < input type = "数量" / >

我想有人可能会发现这很有帮助，因为我最近不得不这样做，试图提高Chrome/FF之间的一致性(因为这是Chrome默认情况下数字输入的行为方式)。

如果您想查看- mz -appearance的所有可用值，可以在这里找到它们(mdn)。

在2021年，有一个更好的解决方案可以让你的firefox像谷歌Chrome一样。 你也应该使用焦点和悬停。

input[type="number"] {
    appearance: none; /* textfield also works! */
}

input[type="number"]:focus, 
input[type="number"]:hover {
    appearance: auto;
}

有关更多信息，请阅读文档