web-dev-qa-db-ja.com

入力番号にスピナーを隠す - Firefox 29

Firefox 28では、私は<input type="number">を使っています。数字だけが含まれているはずの入力フィールドに数字キーボードが表示されるためです。

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

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

jquerycssfirefoxinputspinner
171
NereuJunior

このブログ記事 によると、あなたは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"/>
450
Richard Deeming

Firefoxの-moz-appearanceのデフォルト値はFirefoxのnumber-inputであることを指摘する価値があります。

デフォルトでスピナーを隠したい場合は、最初に-moz-appearance: textfieldを設定することができます、そしてwantスピナーを: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）を使用してください。

42
Josh Crozier

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で使うことができます。

10
AmerllicA
/* 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;}
6
navin prakash

Firefox 29.0.1へのアップデート後の同じ問題に直面した、これもここにリストされています https://bugzilla.mozilla.org/show_bug.cgi?id=947728

解決策：彼ら（Mozillaみんな）は<input type="number">のための "-moz-appearance"のサポートを導入することでこれを修正しました。あなたは "-moz-appearance:textfield;"であなたの入力フィールドに関連したスタイルを持つ必要があるだけです。

私はCSSのやり方が好きです。

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

または

インラインで行うこともできます。

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