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

202

在Firefox 28上，我使用的<input type="number">作品很棒，因为它在仅应包含数字的输入字段上弹出了数字键盘。

在Firefox 29中，使用数字输入会在字段的右侧显示旋转按钮，这在我的设计中看起来像废话。我真的不需要按钮，因为当您仍然需要编写6到10位数的数字时，它们是无用的。

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

— 初中
source

2

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

— 火箭Hazmat 2014年

4

-webkit-inner-spin-button -webkit-outer-spin-button，带有-webkit-appearance：无；边距：0; 不要在Firefox中使用。

— NereuJunior 2014年

12

@RocketHazmat：type="number"移动浏览器需要显示数字键盘而不是完整键盘。

— CodeManX

3

<input type="tel">这只是数字，不包括微调器。

— TomasVeras 2015年

5

更改type="text"是一个坏主意，因为触摸设备将显示错误的键盘。

— WhyNotHugo '16

522

根据这篇博客，你需要设置-moz-appearance:textfield;的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"/>

展开摘要

— 理查德姆
source

1

我将其包裹起来@-moz-document url-prefix() { ... }，就可以实现我想要的功能：将微调器隐藏在Firefox中，看上去不好，但可以在其他浏览器中保持活动，包括那些提到OP的数字键盘。

— Michael Scheper 2014年

4

Geoff Graham提供了一些更有用的信息：数字输入–浏览器默认设置的比较

— Richard Deeming 2015年

3

这确实有效，并且确实消除了微调器，但是现在您可以在其中输入字母数字字符了。希望有人找到一种方法来处理这种情况，而不必检查输入的密钥是否为数字。

— Jovanni G

1

@JovanniG：即使不删除微调器，仍可以在Firefox的输入中输入非数字字符。尝试在MDN上进行演示。在两个示例中，Chrome均会阻止非数字输入。

— 理查德·迪明

1

@alxndr：另外，我刚刚尝试了Chrome 66中的“运行代码段”，它可以按预期工作。

— 理查德·迪明

50

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

如果要默认隐藏微调框，则可以进行-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）
source

11

在SASS/ SCSSstyle中，您可以这样编写：

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

绝对可以在中使用此代码样式PostCSS。

— 美洲A
source

7

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

— 纳文·普拉卡什
source

上面的css代码足以隐藏html <input type =“ number”> spinner

— navin prakash

3

在Firefox更新到29.0.1之后面临相同的问题，此问题也在此处列出 https://bugzilla.mozilla.org/show_bug.cgi?id=947728

解决方案：他们（Mozilla专家）已经通过引入对“ -moz-appearance”的支持来解决此问题<input type="number">。您只需要使用“ -moz-appearance:textfield;” 将样式与您的输入字段相关联即可。

我更喜欢CSS方式，例如：

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

要么

您也可以内联：

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

— 阿比耶耶
source

0

我从上面的答案以及如何在Scss 中的Opera中从input [type =“ number”]删除箭头中混合了几个答案：

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

— 达雷克斯1991
source

0

这为我工作：

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

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

— 雅赫尔·耶基利（Yahel Yechieli）
source