Могу ли я спрятать поле ввода входов номера HTML5?

Ответ 1

Этот 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 hidden */
}

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

<input type="number" step="0.01" />

Ответ 2

В 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">

Ответ 3

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

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" />

Ответ 4

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

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

A pattern of \d* также будет работать.

Ответ 5

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

Ответ 6

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

<input type="number"/>

Ответ 7

Только добавить этот 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;
}

Ответ 8

Я столкнулся с этой проблемой с input[type="datetime-local"], которая похожа на эту проблему.

И я нашел способ преодолеть такие проблемы.

Во-первых, вы должны включить функцию chrome shadow-root с помощью "DevTools → Настройки → Общие → Элементы → Показать тендер пользователя DOM"

Затем вы можете увидеть все скрытые элементы DOM, например, для <input type="number">, полный элемент с затененным DOM:

<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>

Ответ 9

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

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

Ответ 10

Не то, что вы просили, но я делаю это из-за фокуса в 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";
}

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

Ответ 11

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

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; }

Ответ 12

В 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. Правила отключены из-за плохого выбора.

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

Ответ 13

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

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

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

Ответ 14

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

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

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

  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;
      }
  }

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

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

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

Ответ 15

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

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

Ответ 16

Вы используете материал, который спецификация не является окончательной, поэтому я бы сказал, что нет, будет вполне согласованный, кросс-браузерный способ исправления этого.

просто используйте тип ввода = "текст" и используйте форму проверки javascript, чтобы убедиться, что это число.