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


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

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

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


137
2018-04-29 18:48


起源


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


答案:


根据 这篇博文,你需要设置 -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"/>


374
2018-04-29 20:33



我把它包裹起来了 @-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


值得指出的是默认值 -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)。


33
2018-01-01 01:16





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


5
2018-01-09 07:23





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

3
2018-05-20 03:30





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

2
2018-03-30 10:41



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