Mozilla input type number убрать стрелки
Обновлено: 06.07.2024
Почему я предлагаю данный урок, потому что если вы создаете посадочные страницы, интересные формы, просто красивые сайты, то использование стандартных полей типа числовых недопустимо. они имеют ужасный вид. Если еще в хроме не так страшно, то в Мозилле - ой как все плохо.
Выглядеть это будет примерно так:
Как я упомянул выше, данный способ использует jQuery, поэтому к вашему сайту должна быть подключена его библиотека. Если ее нет, то нужно добавить ее.
Только после нее нужно добавлять наш будущий скрипт, который будет помогать менять числовое поле. Если вы не знаете как и куда добавлять библиотеку и скрипт, ознакомьтесь со статьей - Как и где подключить скрипт?.
Сам скрипт имеет следующий вид, его подключать надо ниже библиотеки в коде.
Суть скрипта в том, что он добавляет после числового поля блок - quantity-nav, с двумя дочерними блоками quantity-button, которым так же присвоены свои классы - quantity-up и quantity-down. Это будущие две кнопки + и -, что соответственно будут увеличивать и уменьшать числовое значение в поле.
После добавления блока с кнопками для поля, скрипт отслеживает нажатия на кнопки сравнивает с значением в поле и если значение нужно сменить - уменьшить и увеличить, то меняет его. Все просто, кто знаком с jQuery, разберется без проблем.
Само числовое поле, которое есть у вас при верстке нужно обернуть в родительский блок с классом - quantity (Вы можете менять названия классов на свои, но не забывайте менять их в скрипте и в стилях, чтобы все соответствовало!). Выглядеть, это должно примерно так:
Значения и настройки поля у вас будут свои, но суть понятна. Для корректного отображения - добавляете стили. Примерный набор такой:
Можете менять на свои, только если понимает что и как. расписывать не буду, потому как тут все просто, обычный CSS.
На этом все, спасибо за внимание. 🙂
Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты :)
Читайте также: