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

Question

在Firefox 28上，我正在使用<input type="number">非常好，因为它可以在只应包含数字的输入字段上弹出数字键盘。

在Firefox 29中，使用数字输入会在字段右侧显示旋转按钮，这看起来很糟糕。我真的不需要这些按钮，因为当你需要输入6~10位数时，它们是无用的。

是否可以使用CSS或jQuery禁用此功能？

- NereuJunior

---

如果您不想要旋转箭头，那么请不要使用 type="number"。 您可以使用 type="text" 和 pattern 属性来设置一个正则表达式以确保它是数字。 - gen_Eric

在Firefox中，-webkit-inner-spin-button和-webkit-outer-spin-button与-webkit-appearance: none; margin: 0; 不兼容。 - NereuJunior

@RocketHazmat：在移动浏览器中，为了显示数字键盘而不是全键盘，需要使用type="number"。 - CodeManX

<input type="tel"> 表示只能输入数字，不包含微调器。 - TomasVeras

修改 type="text" 是个不好的主意，因为触摸设备会显示错误的键盘。 - WhyNotHugo

Answer 1

According to this blog post, you need to set -moz-appearance:textfield; on the 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"/>

- Richard Deeming

---

我用@-moz-document url-prefix() { ... }包装了它，它实现了我的要求：在Firefox中隐藏旋转器，因为它们看起来很糟糕，但在其他浏览器中保留它们的功能，包括那些会弹出数字键盘的浏览器，就像OP所提到的那样。 - Michael Scheper

来自Geoff Graham的更多有用信息：数值输入——浏览器默认设置的比较。 - Richard Deeming

这个方法有效，并且确实可以移除旋转器，但是现在你可以输入字母数字字符。希望有人能找到一种处理这种情况的方法，而不必检查输入的键是否为数字。 - Jovanni G

@JovanniG：即使您不删除旋转器，您仍然可以在Firefox中将非数字字符输入到输入框中。请尝试使用MDN上的演示。Chrome在两个示例中都会阻止非数字输入。 - Richard Deeming

@alxndr：另外，我刚试了一下Chrome 66中的“运行代码片段”，它能够正常运作。 - Richard Deeming

Answer 2

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

如果您想默认隐藏微调按钮，您可以最初将-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）。

- Josh Crozier

---

moz-appearance: number-input; 对我没有起作用，但我只是使用了 "auto"。 - Aardvark

Answer 3

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

- AmerllicA

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

- navin prakash

Answer 5

面对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">

- Abhijeet

Answer 6

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

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

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

更多信息，请阅读文档

- Exis

---

这个解决方案最终对我起作用了。具体来说是 appearance: auto;。我还想提一下，appearance: none; 不再起作用了，但是 textfield 可以。 - GeorgeCiesinski

Answer 7

这个对我很有用：

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

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

- Yahel Yechieli

Answer 8

我从上面的答案中和如何在Opera中删除input[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

- Darex1991

---

也许你可以将浏览器前缀属性（如-moz-）放在最后，以防止被非前缀属性覆盖。{ appearance: none; -webkit-appearance: none; -moz-appearance: textfield; } - John Trump