Как стилизовать стрелки для input[type=number]

12.10.2017

Добавим красивые стрелки для увеличения/уменьшения числа в инпуте, например, изменение количества товаров в корзине или что-то на подобие того.

Для начала уберем стандартные стрелки. «Кстати, красивые стрелки» — это я погорячился, суть задачи в том, чтобы просто сделать какие-то отдельные от инпута стрелки, а красивыми их уже сможет сделать каждый сам себе с учетом своего видения красивого.

CSS-стили для input[type=number]

/* Для Chrome */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
/* Для Firefox */
input[type=number]{
  -moz-appearance: textfield;
}

Такой примитивный HTML-код (это упрощенный код из магазина на WooCommerce)

<div class="quantity-block">
  <button class="quantity-arrow-minus"> - </button>
  <input class="quantity-num" type="number" value="1" />
  <button class="quantity-arrow-plus"> + </button>
</div>

Такой примитивный JS-Скрипт с использованием jQuery:

Не забываем подключить jQuery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Скрипт:

$(function() {

  (function quantityProducts() {
    var $quantityArrowMinus = $(".quantity-arrow-minus");
    var $quantityArrowPlus = $(".quantity-arrow-plus");
    var $quantityNum = $(".quantity-num");

    $quantityArrowMinus.click(quantityMinus);
    $quantityArrowPlus.click(quantityPlus);

    function quantityMinus() {
      if ($quantityNum.val() > 1) {
        $quantityNum.val(+$quantityNum.val() - 1);
      }
    }

    function quantityPlus() {
      $quantityNum.val(+$quantityNum.val() + 1);
    }
  })();

});

Рабочий пример на CodePen:

See the Pen customize input[type=number] with js by Denis (@deniscreative) on CodePen.0

Полезная инфа:

Комментарии (21) к “Как стилизовать стрелки для input[type=number]”

  • Дмитрий

    Дружище! От души! Сделал по твоему шаблону ! Все работает! Только я так понял вот эта кракозября — find(".qty"); скорее всего поиск инпута ?))

    Ответить
    • Denis Creative

      Все верно, я упрощал код, и забыл добавить этот класс к инпуту, сейчас обновил код в статье, теперь у инпута класс .quantity-num, и этот же класс используется в скрипте.

      Ответить
    • Denis Creative

      Я поменял код в скрипте, так что аккуратно.

      Ответить
  • Владимир

    Доброго времени суток!
    Все работает.
    Но при нажатии на «+» — нажимаются обе кнопки и «+» и «-«.
    При нажатии кнопки «-» — все норм.
    Подскажите как исправить. Код не менял, вставил как копипастом.

    Ответить
    • Denis Creative

      Проверьте, чтобы правильно были указаны классы для кнопок:

        <button class="quantity-arrow-minus"> - </button>
        <button class="quantity-arrow-plus"> + </button>
      

      и, чтобы правильно были заданны переменные для этих кнопок:

        var $quantityArrowMinus = $(".quantity-arrow-minus");
        var $quantityArrowPlus = $(".quantity-arrow-plus");
      
      Ответить
      • Владимир

        Спасибо за быстрый ответ!
        Проверил, все правильно указано.
        Вот мой код, может вы увидите где ошибка:

        <div class="quantity-block">
          <button class="quantity-arrow-minus"> - </button>
          <input class="quantity-num hidden_input" type="number" form="buy" size="3" min="1" step="1" name="quantity1" value="1" />
          <button class="quantity-arrow-plus"> + </button>
        </div>
        
        $(function() {
         
          (function quantityProducts() {
            var $quantityArrowMinus = $(".quantity-arrow-minus");
            var $quantityArrowPlus = $(".quantity-arrow-plus");
            var $quantityNum = $(".quantity-num");
         
            $quantityArrowMinus.click(quantityMinus);
            $quantityArrowPlus.click(quantityPlus);
         
            function quantityMinus() {
              if ($quantityNum.val() > 1) {
                $quantityNum.val(+$quantityNum.val() - 1);
              }
            }
         
            function quantityPlus() {
              $quantityNum.val(+$quantityNum.val() + 1);
            }
          })();
         
        });
        
        Ответить
  • Владимир

    Еще заметил момент у меня — при клике на поле ввода мышкой, нажимается также и кнопка «-» каждый раз…
    Очень понравилась ваша реализация внешнего вида этих кнопок, но эти моменты хочется исправить.

    Ответить
    • Denis Creative

      Попробуйте выложить ваш код на сайте https://codepen.io/ будет видно наглядно в том числе, со стилями

      Ответить
      • Владимир

        Хорошо. Уже завтра тогда.

        Ответить
      • Владимир

        Добрый день.
        Вот выложил на codeopen свой код.
        Но так нет проблемы — одновременное нажатие кнопки «минус», когда нажимаешь кнопку «плюс».
        Но зато появилась новая трабла (на сайте у меня тоже она есть) — если таких инпутов несколько, то при нажатии на «плюс» одного инпута — срабатывают все.
        Помогите разобраться, пожалуйста.
        https://codepen.io/vovaent/pen/bMOxYG/

        Ответить
        • Denis Creative

          Чтобы кнопки работали для каждой формы отдельно, как вариант можно сделать так — https://codepen.io/deniscreative/pen/bMOmGe

          В функциях quantityMinus() и quantityPlus() переменная числового поля $quantityNum задается только возле кнопки, на которую нажали:

          var $quantityNum = $(this).siblings('.quantity-num');
          

          А что там у вас с одновременным нажатием на две кнопки я не знаю, на codepen все нормально, значит где-то что-то не так у вас с классами или скриптом, или стилями.

          Ответить
          • Владимир

            Понял. Спасибо за помощь. Буду разбираться.

          • Владимир

            Я вас еще не замучал вопросами?))
            Ваш код помог, с несколькими инпутами на странице. Но заметил, что после первого клика не изманяется цифра, а только после второго начинает плюсовать единичку.
            Поможете?

  • Владимир

    А еще, когда наклацал, например, 7, потом наклацал снова до единицы, и начинаешь опять плюсовать — то выводит 8, 9 и т.д. Тоесть плюсует к 7, а не к 1.

    Ответить
    • Denis Creative

      Исправил код, должен работать — https://codepen.io/deniscreative/pen/bMOmGe

      Ответить
      • Владимир

        Благодарю Вас!
        Все работает!
        Осталась, конечно, индивидуальная проблема в том, что при кликах на «+» происходит анимация нажатия и «-» одновременно.
        В codepen.io такой проблемы нет. Может у меня какие-то скрипты друг с другом конфликтуют…
        Их можно как-то проверить на совместимость, кроме консоли в браузере?

        Ответить
  • Владимир

    В исходном примере для одного инпута, нормально минусует и плюсует.

    Ответить
  • Илья

    Сделал специальный плагин под это numberPlugin всё расписано на русском как подключать, применён уже не на одном реальном сайте есть на github https://github.com/igrok666/numberPlugin

    Ответить
    • Denis Creative

      Чем этот плагин лучше кода описанного в статье?
      По мне, так плагин совсем не гибкий и не очень удобный, под свой дизайн нужно много чего менять.

      Ответить
  • Илья

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

    Ответить

Оставить комментарий