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

773

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

<input id="test" type="number">
  • 1
    Можете ли вы опубликовать пример кода, который вы используете? Снимок экрана также был бы великолепен, поэтому мы знаем, на что вы смотрите. Я смотрю на <input type="number" min="4" max="8" /> в Chrome и вижу типичное поле ввода со стрелками вверх и вниз сбоку.
  • 69
    Вы видите именно то, что я вижу. Я пытаюсь сохранить разметку type = number, чтобы мобильные браузеры отображали соответствующую клавиатуру и предотвращали появление стрелок вверх и вниз в компьютерных браузерах.
Показать ещё 2 комментария
Теги:
input
numbers

16 ответов

907
Лучший ответ

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

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

Изображение 2220

  • 13
    Похоже, что в Chrome больше нет проблем, поэтому вы можете просто использовать display: none; как единственная вещь внутри селектора
  • 9
    К сожалению, это не кросс-браузер, поэтому я бы рекомендовал не использовать type=number если вам нужно скрыть эти стрелки. Например, в настоящее время они будут по-прежнему отображаться в Opera, и они начнут отображаться в Firefox, IE и т. Д., Когда они реализуют этот тип ввода.
Показать ещё 4 комментария
369

В 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">
  • 0
    Это плюс 'margin: 0' от ответа antonj - это то, что я использовал
331

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

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:

В текущих версиях Firefox значение по умолчанию для -moz-appearance (пользовательский агент) для этих элементов 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 для этих элементов уже 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.

В настоящее время, начиная с написания этого, здесь используется стиль пользовательского агента по умолчанию для псевдо-класса "внутренний-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;
}
  • 12
    мне больше нравится этот ответ, потому что он включает в себя релевантную информацию о firefox, которую необходимо учитывать при разработке чего-либо. Ответы только для webkit, которые игнорируют другие движки браузера, оставляют желать лучшего
113

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

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

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

  • 5
    Несмотря на вышесказанное, проверенное решение работает очень хорошо для данной проблемы, я решил перейти к этому решению здесь. Одной из причин является то, что, например, браузер Opera также показывает стрелки, которые вы также должны предотвратить. Во-вторых, я наблюдал большие проблемы в Chrome 17. Там, с одной стороны, атрибут maxlen, похоже, больше не работает; Вы можете ввести столько символов, сколько захотите. С другой стороны, числа, которые превышают определенную длину, просто округляются. Использование этого решения для «простого открытия цифровой клавиатуры на устройстве iOS» кажется мне более безопасным.
  • 0
    Я также пошел с этими решениями, так как у меня был JS, который форматировал число в поле ввода, когда я печатал, и который не работал с полем числа. Так что этот работал как шарм.
Показать ещё 6 комментариев
36

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

  • 14
    Это решение в настоящее время не выполняет никакой проверки в любых браузерах, таких как type=number .
  • 5
    Клавиатура телефона не так хороша, как цифровая клавиатура , хотя она намного лучше, чем текстовая клавиатура . На телефонной клавиатуре есть несоответствующие буквы и символы, которые опущены на цифровой клавиатуре. (Проверено на этой странице на Android 4.2.)
Показать ещё 13 комментариев
19
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"/>
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>

Изображение 2221

И в соответствии с этой информацией вы можете создать CSS-код, чтобы скрыть нежелательные элементы, так же, как @Josh сказал.

6

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

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
<input id="test" type="number">
  • 3
    Этот ответ был дан уже несколько раз. Это помогает прочитать существующие ответы перед предоставлением нового, в случае, если новый является дубликатом.
3

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

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

  • 0
    Это не совсем то, о чем я говорил, но из-за отсутствия стандартизации HTML5 это лучшее из представленных решений. Предоставление сайта для мобильных устройств, отличного от рабочего стола (независимо от того, как он реализован), кажется единственным способом сделать это в настоящее время. Однако мне пришлось создать копию элемента и изменить значение «type» перед добавлением его в DOM. Поскольку IE не позволяет изменять тип ввода после добавления элемента в dom.
2

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

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

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

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

  • 1
    -webkit-* для Chrome, -moz-* для Mozilla Firefox. Вот почему это не сработало для вас.
1

Возможно, измените введенный номер с помощью 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';

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

  • 0
    Это не будет работать с копией вставки
1

Чтобы сделать эту работу в 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.

0

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

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

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню