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