入力番号のスピナーを非表示にする-Firefox 29

Firefox 28では、<input type="number">数字のみを入力する必要がある入力フィールドに数字キーボードが表示されるため、うまく機能しています。

Firefox 29では、数値入力を使用すると、フィールドの右側にスピンボタンが表示されます。これは、私のデザインではがらくたのように見えます。とにかく6桁から10桁の数字のようなものを書く必要があるときは、ボタンは役に立たないので、私は本当にボタンは必要ありません。

CSSまたはjQueryでこれを無効にすることは可能ですか？

よると、このブログの記事、あなたが設定する必要が-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"/>

-moz-appearanceこれらの要素のデフォルト値はnumber-inputFirefoxにあることを指摘する価値があります。

あなたは、デフォルトでスピナーを非表示にしたい場合は、設定することができ-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）で見つけることができます。

では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。

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

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

上記の回答とオペラの scssのinput [type = "number"]から矢印を削除する方法からいくつかの回答を混ぜました：

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）