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

Hide Spinner in Input Number - Firefox 29

提问by NereuJunior

On Firefox 28, I'm using <input type="number">works great because it brings up the numerical keyboard on input fields which should only contain numbers.

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

In Firefox 29, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6~10 digit number anyway.

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

Is it possible to disable this with CSS or jQuery?

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

回答by Richard Deeming

According to this blog post, you need to set -moz-appearance:textfield;on the input.

根据这篇博文，您需要-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"/>

回答by Josh Crozier

It's worth pointing out that the default value of -moz-appearanceon these elements is number-inputin Firefox.

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

If you want to hide the spinner by default, you can set -moz-appearance: textfieldinitially, and if you wantthe spinner to appear on :hover/:focus, you can overwrite the previous styling with -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).

我认为有人可能会发现这很有帮助，因为我最近不得不这样做以尝试提高 Chrome/FF 之间的一致性（因为这是 Chrome 中数字输入的默认行为方式）。

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

如果您想查看 的所有可用值-moz-appearance，可以在此处(mdn)找到它们。

回答by AmerllicA

In SASS/SCSSstyle, you can write like this:

在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;
  }
}

Definitely this code style can use in PostCSS.

这种代码风格绝对可以在PostCSS.

回答by navin prakash

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

回答by Abhijeet

Faced the same issue post Firefox update to 29.0.1, this is also listed out here https://bugzilla.mozilla.org/show_bug.cgi?id=947728

在 Firefox 更新到 29.0.1 后遇到同样的问题，这里也列出了 https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Solutions: They(Mozilla guys) have fixed this by introducing support for "-moz-appearance" for <input type="number">. You just need to have a style associated with your input field with "-moz-appearance:textfield;".

解决方案：他们（Mozilla 人员）通过为<input type="number">. 你只需要有一个与你的输入字段相关联的样式“ -moz-appearance:textfield;”。

I prefer the CSS way E.g.:-

我更喜欢 CSS 方式，例如：-

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

Or

或者

You can do it inline as well:

您也可以内联进行：

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

回答by Darex1991

I mixed few answers from answers above and from How to remove the arrows from input[type="number"] in Operain scss:

我从上面的答案和How to remove the arrows from input[type="number"] in Operain 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

回答by Yahel Yechieli

This worked for me:

这对我有用：

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

Solved in Firefox, Safari, Chrome. Also, -moz-appearance: textfield;is not supported anymore (https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)

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