躲起来;向下箭头按钮(旋转)在输入数字- Firefox 29

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

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

是否有可能禁用这与CSS或jQuery?

181884 次浏览
小开
最佳答案

根据这篇博文，你需要在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;
}
<input type="number" step="0.01"/>

小开
Firefox更新到29.0.1后也面临同样的问题，这也列在这里 https://bugzilla.mozilla.org/show_bug.cgi?id=947728 < / p > < p >解决方案: 他们(Mozilla的家伙们)通过为<input type="number">引入“-moz-appearance”支持来修复这个问题。 你只需要有一个样式与你的输入字段"-moz-appearance:textfield;"相关联 我更喜欢CSS的方式 例如:- < / p > 
.input-mini{
-moz-appearance:textfield;}

或

你也可以内联执行:

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

值得指出的是，在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"/>

I thought someone might find that helpful since I recently had to do this in attempts to improve consistency between Chrome/FF (since this is the way number inputs behave by default in Chrome).

If you want to see all the available values for -moz-appearance, you can find them here (mdn).

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

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

小开

我从上面的答案和如何在Opera中删除输入[type="number"]中的箭头混合了一些答案 scss: < / p > 

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
小开

这招对我很管用:

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

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

小开
在2021年，有一个更好的解决方案让你的firefox像谷歌Chrome一样。 你也应该使用焦点和悬停 
input[type="number"] {
appearance: none; /* textfield also works! */
}


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

有关更多信息，请阅读文档


提交答案