[解決済み】 input type="number "でのwebkitのスピンボタンを無効にする？

質問

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

モバイル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;
}