Question

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

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

是否可以使用CSS或jQuery禁用它？

Answer 1

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

＆＃13;

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

＆＃13;

<input type="number" step="0.01"/>

＆＃13;

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的所有可用值，可以找到它们here（mdn）。

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

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

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方式 E.g： -

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

或

你也可以内联：

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

Answer 6

这对我有用：

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

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

Answer 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

在输入数字中隐藏微调器 - Firefox 29

7 个答案: