在输入数字中隐藏上下箭头按钮(旋转器)- Firefox 29

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

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

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

当前回答

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

2017-03-30 10:41:49

其他回答

根据这篇博文，你需要设置-moz-appearance:textfield;在输入上。输入(type =数量)::-webkit-outer-spin-button, 输入(type =数量)::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金:0; ｝输入(type =数量){ -moz-appearance:文本框; ｝ <input type="number" step="0.01"/>

2014-04-29 20:33:43

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

2017-03-30 10:41:49

在2021年，有一个更好的解决方案可以让你的firefox像谷歌Chrome一样。你也应该使用焦点和悬停。

input[type="number"] {
    appearance: none; /* textfield also works! */
}

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

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

2021-11-24 00:42:57

这招对我很管用:

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

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

2020-03-11 14:15:41

我从上面的答案和如何在Opera中删除输入[type="number"]中的箭头中混合了一些答案 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

2019-06-27 11:47:26

在输入数字中隐藏上下箭头按钮(旋转器)- Firefox 29

推荐文章

最新文章

标签