在输入数字中隐藏向上和向下箭头按钮（微调器） - Firefox 29

根据this blog post，您需要在input 上设置-moz-appearance:textfield;。

输入[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none;边距：0； } 输入[类型=数字] { -moz-外观：文本字段； }

---

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

如果您想默认隐藏微调器，您可以初始设置 -moz-appearance: textfield，如果您希望微调器出现在 :hover/:focus 上，您可以使用 { 覆盖之前的样式4}。

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

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

如果您想查看 -moz-appearance 的所有可用值，可以找到它们 here (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 中使用这种代码样式。

---

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

或者

你也可以内联：

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

---

这对我有用：

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

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

---

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

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

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

如需更多信息，请阅读documentation

---

我混合了上面答案和 scss 中 How to remove the arrows from input[type="number"] in Opera 的几个答案：

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

---