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

【问题标题】：Hide Up & Down Arrow Buttons (Spinner) in Input Number - Firefox 29在输入数字中隐藏向上和向下箭头按钮（微调器） - Firefox 29
【发布时间】：2014-06-15 21:03:33
【问题描述】：

在 Firefox 28 上，我使用 <input type="number"> 效果很好，因为它会在只包含数字的输入字段上显示数字键盘。

在 Firefox 29 中，使用数字输入会在字段右侧显示旋转按钮，这在我的设计中看起来很垃圾。我真的不需要这些按钮，因为无论如何当你需要写一个 6~10 位的数字时，它们都是无用的。

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

【问题讨论】：

如果您不想要旋转箭头，请不要使用type="number"。您可以使用type="text" 和pattern 属性来设置正则表达式以确保它是一个数字。
-webkit-inner-spin-button -webkit-outer-spin-button with -webkit-appearance: none;边距：0；不要在 Firefox 中工作。
@RocketHazmat：移动浏览器需要type="number" 才能显示数字键盘而不是全键盘。
<input type="tel"> 这只是数字，不包括微调器。
更改type="text" 是个坏主意，因为触摸设备会显示错误的键盘。

标签： css firefox input spinner

【解决方案1】：

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

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

&lt;input type="number" step="0.01"/&gt;

【讨论】：

我将它包装在@-moz-document url-prefix() { ... } 中，它可以满足我的需求：在 Firefox 中隐藏微调器，它们看起来很糟糕，但在其他浏览器中保持它们的活力，包括将数字键盘作为提到的OP。
Geoff Graham 提供的更多有用信息：Numeric Inputs – A Comparison of Browser Defaults
这行得通，并且确实删除了微调器，但是您现在可以在其中输入字母数字字符。希望有人找到一种方法来处理这种情况，而不必检查输入的键是否是数字。
@JovanniG：即使您不删除微调器，您仍然可以在 Firefox 的输入中输入非数字字符。试试demo on MDN。 Chrome 在这两个示例中都阻止了非数字输入。
@alxndr：另外，我刚刚在 Chrome 66 中尝试了“运行代码 sn-p”，它按预期工作。

【解决方案2】：

值得指出的是，这些元素上-moz-appearance的默认值在Firefox中是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;
}

&lt;input type="number"/&gt;

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

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

【讨论】：

【解决方案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中使用。

【讨论】：

【解决方案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;}

【讨论】：

【解决方案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">

【讨论】：

【解决方案6】：

这对我有用：

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

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

【讨论】：

【解决方案7】：

我从上面的答案和How to remove the arrows from input[type="number"] in Opera 混合了几个答案在 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

【讨论】：

【解决方案8】：

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

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

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

更多信息，请阅读documentation

【讨论】：