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


986

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

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

2
Можете ли вы опубликовать пример кода, который вы используете? Снимок экрана также был бы великолепен, поэтому мы знаем, на что вы смотрите. Я смотрю <input type="number" min="4" max="8" />в Chrome и вижу типичное поле ввода со стрелками вверх и вниз на стороне.
Calvinf

78
Вы видите именно то, что я вижу. Я пытаюсь сохранить разметку type = number, чтобы мобильные браузеры отображали соответствующую клавиатуру и предотвращали появление стрелок вверх и вниз в компьютерных браузерах.
Алан

3
Если вы используете цифровые входы, не забудьте использовать то , что играет хорошо с современной прошивкой, Android и настольных браузеров: <input type="number" pattern="[0-9]*" inputmode="numeric">. Дополнительная информация: stackoverflow.com/a/31619311/806956
Аарон Грей,

1
Что я предлагаю делать, так это писать разметку в соответствии <input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > с jQuery Validati или аналогичной ей для обработки валидации. Я не проверял этот подход, поэтому это комментарий, а не ответ.
Agi Hammerthief

Ответы:


1142

Этот 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":

Инспектор для типа ввода = число (Chrome)


24
Похоже, что в Chrome больше нет проблем, поэтому вы можете просто использовать его display: none;как единственное в селекторе
philfreo

9
К сожалению, это не кросс-браузер, поэтому я бы рекомендовал не использовать, type=numberесли вам нужно скрыть эти стрелки. Например, в настоящее время они будут по-прежнему отображаться в Opera, и они начнут отображаться в Firefox, IE и т. Д., Когда они реализуют этот тип ввода.
mgol

Мне нужно использовать max=и min=атрибуты <input>так альтернативных решений , таких , как type="text"не являются действительными HTML5. Люди также упоминают Opera, включая эти счетчики. Есть ли решение для Opera, похожее на Safari / Chrome?
unode

2
для записи, Chrome также имеет input::-webkit-clear-buttonдля кнопки X
aldo.roman.nurena

2
По состоянию на 2019 год это не сработало для меня в Firefox. Это решение сработало для меня: stackoverflow.com/questions/45396280/…
lwitzel

431

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


Это плюс 'margin: 0' из ответа antonj - это то, что я использовал
Asfand Qazi

Я использовал его без наценки, и, кажется, все в порядке (май 2020 года).
Крораф

359

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

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

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

Добавить к существующему ответу ...

Fire Fox:

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

В настоящий момент, на момент написания этой статьи, здесь используется стили пользовательского агента по умолчанию для псевдокласса 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;
}

14
мне больше нравится этот ответ, потому что он включает в себя соответствующую информацию о Firefox, которую, при разработке чего-либо, необходимо учитывать. Ответы только для webkit, игнорирующие другие движки браузера, оставляют желать лучшего
RozzA

добавьте! важное для решения Firefox. ПОНРАВИТСЯ ЭТОМ ===> input [type = "number"] {-moz-Appearance: textfield! важный; }
Саджад Садери

126

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

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

А patternиз \d*также будет работать.


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

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

19
Это в настоящее время ничего не делает на Android, во всех браузерах. Протестировано на этой тестовой странице в браузере 4.2.2, Chrome 28 и Firefox 23 на Android 4.2. Эти браузеры просто показывают стандартную текстовую клавиатуру с этой разметкой.
Рори О'Кейн

3
Вот хорошее решение как для Android, так и для iOS: stackoverflow.com/a/31619311/806956
Аарон Грей,

1
@AaronGray вернемся к исходной точке: у этого решения есть счетчики для рабочего стола.
Странно,

39

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


17
Это решение в настоящее время не выполняет никакой проверки в любых браузерах, как это type=numberделает.
Пепейн

5
Клавиатура телефона не так хороша, как цифровая клавиатура , хотя она намного лучше, чем текстовая клавиатура . На телефонной клавиатуре есть несоответствующие буквы и символы, которые опущены на цифровой клавиатуре. (Проверено на этой странице на Android 4.2.)
Рори О'Кейн

16
здесь нет "." в
телефонной

1
@ RoryO'Kane Цифровая клавиатура имеет очень большой недостаток, заключающийся в том, что она будет запрещать любой ввод, который не является строго числом.
Йохем Куиджперс

4
Это не решение, и по стандартам HTML5 это глупо. input [tel] - для телефонных номеров, input [number] - для общих номеров, в том числе с плавающей запятой. Так что это не решение вообще.
Василь Попов,

17

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

в соответствии с caniuse input[type=number]{ -webkit-appearance }должно быть достаточно для Chrome, но, конечно, вам также необходимо изменить псевдоэлементы . есть идеи почему ??
старик

8

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

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

Во-первых, вы должны включить функцию теневого корня Chrome с помощью «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>

теневой DOM ввода [type = "number"

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


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

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


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

3

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

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

что margin: 0достигается? Кроме того, spin-buttonкажется, что псевдоэлементы не запускаются hoverв новых браузерах?
старик

2

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


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. Вот почему это не сработало для вас.
Gusstavv Gil

2

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


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

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

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


1

В браузерах на основе WebKit и Blink и All Kind Of Browser используется следующий CSS:

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

На каких браузерах это будет работать, учитывая использование webkit? При ответе на вопрос девятилетней давности с четырнадцатью существующими ответами важно добавить объяснение того, как и почему работает ваш ответ, и указать, на какой новый аспект вопроса он отвечает.
Джейсон Аллер

0

Мне нужно было это работать

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

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

Дополнительная линия appearance: noneбыла ключевой для меня.


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.