input[type='number']

July 25, 2016

Не знаю, почему, но стрелки увеличения/уменьшения значения в поле с типом number на англоязычном stackoverflow называются spinner.

Тем не менее, по работе появилась хотелочка убрать стрелки с полей с типом number с десктопа и показывать цифровую клавиатуру на телефонах.

Начнем с десктопа. Здесь уберем стрелки для всех возможных браузеров:

input[type="number"] {
  -moz-appearance: textfield /* Отключаем стрелки у FF */
}

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

Теперь интересное: по дефолту на мобильных устройствах при выставлении у input типа number на Android’e появляется цифровая клавиатура, а на iOS - нет. Решаем это таким образом:

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

Демо: http://jsbin.com/tazobel/1/edit?html,css,output