根据这篇博文，你需要设置-moz-appearance:textfield;在输入上。 输入(type =数量)::-webkit-outer-spin-button, 输入(type =数量)::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金:0; ｝ 输入(type =数量){ -moz-appearance:文本框; ｝ <input type="number" step="0.01"/>

值得指出的是，在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)。

在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中使用。

这招对我很管用:

    input[type='number'] {
    appearance: none;
}

解决在Firefox, Safari, Chrome。另外，-moz-appearance: textfield;不再支持(https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)

我从上面的答案和如何在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

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

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

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

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