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

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

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

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

-webkit-appearanceまたは他のCSSトリックでこれを無効にすることは可能ですか？運が悪いので試してみました。

以下の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;
}

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

最初の部分は私を助けてくれましたが、まだtype=number入力の右側にスペースがありました。入力のマージンをゼロにしましたが、スピナーのマージンもゼロにする必要があったようです。

これはそれを修正しました：

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

これが最善の方法かどうかはわかりませんが、これによりスピナーがChrome 8.0.552.5 devで表示されなくなります。

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

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

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

次のトリックでスピナーを隠すこともできます：

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}