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

Question

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

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

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

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

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

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

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

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

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

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

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.

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

Answer 4

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

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

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

Answer 5

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

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

Answer 7

Я столкнулся с этой проблемой с 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>

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

Answer 8

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

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

Answer 9

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

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

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

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