web-dev-qa-db-ja.com

入力type = "number"でWebkitのスピンボタンを無効にしますか？

私は主にモバイルユーザー向けですが、デスクトップ向けのサイトもあります。

Mobile Safariでは、<input type="number">を使用すると、数字のみを含む入力フィールドに数値キーボードが表示されるため、非常に効果的です。

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

-webkit-appearanceまたは他のCSSトリックでこれを無効にすることは可能ですか？私は多くの運なしで試しました。

csshtml5webkit
201
pojo

以下のcssは、ChromeとFirefoxの両方で機能します

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;
}
108
Rolwin C

これに対する答えの2番目の部分があることを発見しました。

最初の部分 助けてくれましたが、まだtype=number入力の右側にスペースがありました。入力のマージンをゼロにしましたが、どうやらスピナーのマージンもゼロにしなければなりませんでした。

これにより修正されました。

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
282
Bob Spryn

これが最善の方法かどうかはわかりませんが、これによりChrome 8.0.552.5 devでスピナーが消えます：

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
15
robertc

スピナーがOperaに表示されるのを防ぐことは不可能に思えます。一時的な回避策として、スピナー用のスペースを確保できます。私が知る限り、次のCSSはOperaでのみ十分なパディングを追加します：

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}
10
Goulven