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

Question

Существует ли согласованный способ в разных браузерах скрывать новые спин-боксы, которые некоторые браузеры (например, Chrome) отображают для ввода HTML типа type? Я ищу метод CSS или JavaScript для предотвращения появления стрелок вверх / вниз.

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

Answer 1

В Firefox для Ubuntu, просто используя

    input[type='number'] {
    -moz-appearance:textfield;
}

помог мне.

Добавление

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

приведет меня к

Неизвестный псевдокласс или псевдоэлемент ‘-webkit-outer-spin-button’. Набор правил игнорируется из-за неправильного селектора.

каждый раз, когда я пытался. То же самое для внутренней кнопки вращения.

Answer 2

Возможно, измените ввод числа с помощью javascript на ввод текста, когда вы не хотите вращать;javascript измените его обратно на тот случай, если вам нужен спиннер;

document.getElementById('myinput').type = 'number';

он хорошо работал для моих целей

Answer 3

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

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

Answer 4

вы можете использовать этот простой код в вашем файле CSS:

input[type="number"] {
-moz-appearance: textfield;
}