Можно ли скрыть спиннер для числового ввода в HTML5?

В Firefox 29 была добавлена поддержка элементов типа number, поэтому вот фрагмент кода, который скрывает спиннеры в браузерах на основе WebKit и Mozilla:

input[type='number'] {
    -moz-appearance: textfield; /* Для Mozilla Firefox */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Для браузеров на основе WebKit */
}

И вот пример использования:

<input id="test" type="number">

Этот код скрывает спиннеры по обеим сторонам текстового поля, что может быть полезно для улучшения оформления вашей формы.

Я нашел очень простое решение с использованием

<input type="text" inputmode="numeric" />

Это поддерживается в большинстве браузеров:

• https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/inputmode
• https://caniuse.com/input-inputmode

Попробуйте использовать input type="tel" вместо этого. Это вызовет появление клавиатуры с цифрами и не отобразит спиннеры. Для этого не требуется JavaScript, CSS, плагинов или каких-либо дополнительных инструментов.

Вот CSS, который уберет спиннер для полей ввода чисел:

/* Для Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

/* Для браузеров Webkit, таких как Safari и Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Добавьте этот стиль в ваш CSS, и спиннер исчезнет.

Чтобы сделать это работающим в Safari, я обнаружил, что добавление !important к свойству webkit заставляет скрыть кнопку вращения. Вот пример кода:

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- вызывает сбой в Chrome при наведении */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Похоже, что некоторые отступы все еще остаются, даже несмотря на то, что элементы скрыты */
}

Однако у меня все еще возникают трудности с решением этой проблемы для Opera.