隐藏在微调数量的输入 - 火狐29隐藏在微调数量的输入 - 火狐29(Hide Spinner in

在Firefox 28中，我使用<input type="number">因为它带来了数字键盘上只能包含数字输入字段的伟大工程。

在Firefox 29，通过数字输入的显示器在外地，它看起来像在我的设计废话右侧的旋转按钮。 我真的不需要的按钮，因为他们是无用的，当你需要这么写的东西像6〜10位数字。

是否有可能使用CSS或jQuery来禁用此？

Answer 1:

根据这一博客帖子 ，您需要设置-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"/> 

Answer 2:

值得指出的缺省值-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）。

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的人）已经通过引入“-moz-外观”为支持固定该<input type="number"> 你只需要拥有与您的输入字段关联的样式“ -moz-appearance:textfield; ”。

我更喜欢CSS方式如： -

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

要么

你可以这样做在线，以及：

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

文章来源: Hide Spinner in Input Number - Firefox 29