Отключение кнопок прокрутки в input number с CSS

Быстрый ответ

Чтобы скрыть кнопки увеличения/уменьшения в числовых полях ввода, можно использовать следующие CSS стили:

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Кнопки спрятаны */
}

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

Причины избавиться от спиннеров

Отказ от спиннеров может серьезно улучшить пользовательский интерфейс:

• Единообразие интерфейса обеспечивается в разных браузерах.
• Простота дизайна достигается за счёт устранения излишних элементов, что особенно важно на экранах мобильных устройств.
• Фокусировка внимания пользователя сосредоточивается на главной задаче – точном вводе данных.

Настройка фокуса в мобильных интерфейсах

В мобильных интерфейсах мелкие детали играют критическую роль:

• Экранное пространство очень ценно, поэтому следует выбирать только необходимые элементы.
• Области сенсорного взаимодействия должны быть максимально удобными для использования на малых экранах.
• Использование клавиатуры уменьшается, делая соответствующие стрелки редко используемыми элементами.

Вывод прост: адаптируйте поля ввода для сенсорного управления, чтобы они были максимально удобными на мобильных устройствах.

Избавление от спиннера: последствия и преимущества

Спиннеры не всегда оказываются полезными. При их удалении вы можете столкнуться со следующим:

• Точность ввода: так же, как и сложность попасть по нужной клавише на клавиатуре телефона, ввод длинной числовой последовательности может оказаться затруднительным.
• Быстрый ввод: Клавиатура незаменима, когда требуется быстро ввести уже известные данные.

Недостаток спиннеров помогает сфокусироваться на скорости и точности ввода.

Визуализация

Спиннеры могут напомнить детскую игрушку с пропеллером (🌀) на вашем поле ввода:

<input type="number"> /* "Посмотри, мама, спиннеры!" */

А вот CSS-магия, удаляющая ненужные элементы:

input::-webkit-inner-spin-button, 
input::-webkit-outer-spin-button {
  -webkit-appearance: none; /* Нет больше спиннеров. */
}

Результат: поле ввода теперь выглядит спокойно и не отвлекает лишними элементами.

До: [1️⃣🌀] /* Как повязка у пирата. */
После: [1️⃣] /* Чисто, как улыбка щенка. */

Вы успешно устранили все отвлекающие детали.

Каждая деталь должна быть на своем месте

Удаление спиннера может нарушить гармонию компоновки элементов. Чтобы восстановить баланс:

• Справиться с проблемами выравнивания можно таким образом:

  CSS

  Скопировать код

  input[type="number"] {
    margin: 0; /* Никаких отступов! */
  }

  Запустить код

• Обновляем дизайн полей ввода: Когда спиннеры исчезают, образуется пустое пространство – время обновить дизайн:

  CSS

  Скопировать код

  input[type="number"] {
    border: 1px solid #ccc; /* Все становится видно. */
    padding: 5px;
    border-radius: 4px; /* Углы должны быть скруглёны. */
  }

  Запустить код

Сценарии из реальной жизни

Пока заваривается ваш кофе, подумайте об обстоятельствах, в которых спиннеры были бы неуместны, аналогично пингвинам в пустыне:

• Финансовые операции: Необходима точность, спиннеры оказываются излишними.
• Проверочные коды: Требуется конкретный набор цифр, без спиннеров будет лучше.
• Дата рождения: Люди обычно запоминают такие даты, им не требуются спиннеры для ввода.

Смысл прост – отключение спиннеров упрощает ввод.

Ограничения и меры по предотвращению непредвиденных обстоятельств

Скрытие кнопок увеличения/уменьшения требует тщательного соотношения всех деталей:

• Предупреждение заранее! Не все пользователи могут быстро привыкнуть к изменениям.
• "Верные старики": Некоторые старые браузеры могут не поддерживать свойство -webkit-appearance. Не забывайте о существовании альтернативных методов, чтобы не оставить кого-то в стороне.

Полезные материалы

1. Могу ли я скрыть спин-бокс у HTML5 number input? – Stack Overflow — Обсуждение методов скрытия кнопок счетчика Webkit.
2. <input type="number"> – HTML: HyperText Markup Language | MDN — Подробное руководство по использованию числовых полей ввода.
3. Исключаем спиннеры из числовых полей ввода | CSS-Tricks — Трюки и лайфхаки, помогающие сделать спиннеры невидимыми.
4. Типы полей ввода в HTML – W3Schools — Всё об типах полей ввода в HTML.
5. Запрет прокрутки в <input type=number> – Stack Overflow — Как запретить прокрутку в числовых полях ввода в браузере Chrome.
6. Стандарт HTML — Подробное описание типа number для элементов input.
7. Тип number для полей ввода | Can I use... Support tables for HTML5, CSS3, etc — Состояние поддержки числовых полей ввода разными браузерами.