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

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

Этот CSS эффективно скрывает кнопку прокрутки для браузеров webkit (протестировал ее в Chrome 7.0.517.44 и Safari версии 5.0.2 (6533.18.5)):

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

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
<input type="number" step="0.01" />

Вы всегда можете использовать инспектор (webkit, возможно, Firebug для Firefox) чтобы найти подходящие CSS-свойства для интересующих вас элементов, найдите псевдо-элементы. На этом рисунке показаны результаты для элемента ввода type = «number»:

Inspector for input type=number (Chrome)

В Firefox 29 в настоящее время добавлена ​​поддержка числовых элементов, поэтому ниже приведен фрагмент для скрытия счетчиков в браузерах на основе webkit и moz:

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

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
<input id="test" type="number">

Краткий ответ:

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;
}
<input type="number" />

Более длинный ответ:

Чтобы добавить к существующему ответу …

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

В текущих версиях Firefox значение по умолчанию (пользовательский агент) -moz-appearance flexbox: для этих элементов равно number-input. Изменение этого значения на textfield эффективно удаляет счетчик.

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

В некоторых случаях вы можете захотеть, чтобы вращатель сначала был скрыт первоначально { *} Попробуйте вместо этого использовать , а затем появлялся при наведении / фокусировке. (В настоящее время это поведение по умолчанию в Chrome). Если это так, вы можете использовать следующее:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}
<input type="number"/>

Chrome:

В текущих версиях Chrome (пользовательский агент) значение по умолчанию -webkit-appearance flexbox: . Вы можете использовать textfield. Чтобы удалить спиннер, значение свойства -webkit-appearance необходимо изменить на none. Если вы хотите, чтобы экземпляры имели свои собственные массивы, создайте их в функции, а не в прототипе. ::-webkit-outer-spin-button в качестве аргументов. ::-webkit-inner-spin-button псевдоклассы (это -webkit-appearance: inner-spin-button как дубликат

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

Стоит отметить, что margin: 0 используется для удаления поля в более старом {*) } версии Chrome. В настоящий момент на момент написания этой статьи здесь используется стиль пользовательского агента по умолчанию для псевдокласса «inner-spin-button»:

Согласно

input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}

руководству Apple по кодированию пользовательского интерфейса для мобильного Safari из , вы можете использовать следующее, чтобы отобразить цифровую клавиатуру в браузере iPhone:

<input type="text" pattern="[0-9]*" />

Закрытие pattern также будет работать. d* Попробуйте использовать

. На экране появляется клавиатура с цифрами, и на ней не отображаются спин-боксы. Он не требует JavaScript, CSS, плагинов или чего-либо еще. input type="tel" Добавьте этот CSS только для удаления счетчика при вводе числа

. Я столкнулся с этой проблемой с

/* For Firefox */

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



/* Webkit browsers like Safari and Chrome */

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

, которая похожа на эту проблему. input[type="datetime-local"] Во-первых, вы должны включить функцию теневого корня Chrome с помощью «DevTools — & Gt ; Настройки — & Gt ; Общие сведения — & Gt ; Элементы — & Gt ; Показать теневой DOM агента пользователя «

источник

Затем вы можете увидеть все

затененные элементы DOM , полный элемент с затененным DOM: Однако иногда вам действительно нужен постоянный интервал выполнения ваших обратных вызовов без дрейфа. Это требует немного более выгодной стратегии (и кода), хотя она хорошо окупается (и регистрирует меньше тайм-аутов). Они известны как <input type="number"> И в соответствии с этой информацией, вы можете создать некоторый CSS, чтобы скрыть ненужные элементы, как сказал @Josh.

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

shadow DOM of input[type="number"

Не то, что вы просили, но я делаю это из-за ошибки фокуса в WebKit со спинбоксами:

Это может дать вам идею помочь с тем, что вам нужно.

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

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

помогли мне.

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">

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

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

Добавление

привело бы меня к

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

неизвестному псевдоклассу или псевдоэлементу -webkit-external-spin-button ‘. Правило игнорируется из-за плохого селектора.

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

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

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

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 */
}

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

, и остановите ввод текста пользователем ;

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

, а затем сделайте так, чтобы JavaScript изменил его обратно. в случае, если вам нужен спиннер ;

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }

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

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

Как отменить переменную JavaScript? — Переполнение стека

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

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