Как стилизовать стрелки для 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

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

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

Дмитрий
24.03.2018
Дружище! От души! Сделал по твоему шаблону ! Все работает! Только я так понял вот эта кракозября — find(".qty"); скорее всего поиск инпута ?))
Ответить
- Denis Creative
  24.03.2018
  Все верно, я упрощал код, и забыл добавить этот класс к инпуту, сейчас обновил код в статье, теперь у инпута класс .quantity-num, и этот же класс используется в скрипте.
  Ответить
- Denis Creative
  24.03.2018
  Я поменял код в скрипте, так что аккуратно.
  Ответить

Владимир

19.05.2018

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

Ответить

Denis Creative

19.05.2018

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

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

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

  var $quantityArrowMinus = $(".quantity-arrow-minus");
  var $quantityArrowPlus = $(".quantity-arrow-plus");

Ответить

Владимир

19.05.2018

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

<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);
    }
  })();
 
});

Ответить

Владимир
19.05.2018
Еще заметил момент у меня — при клике на поле ввода мышкой, нажимается также и кнопка «-» каждый раз…
Очень понравилась ваша реализация внешнего вида этих кнопок, но эти моменты хочется исправить.
Ответить
- Denis Creative
  19.05.2018
  Попробуйте выложить ваш код на сайте https://codepen.io/ будет видно наглядно в том числе, со стилями
  Ответить
  - Владимир
    19.05.2018
    Хорошо. Уже завтра тогда.
    Ответить
  - Владимир
    19.05.2018
    Добрый день.
    Вот выложил на codeopen свой код.
    Но так нет проблемы — одновременное нажатие кнопки «минус», когда нажимаешь кнопку «плюс».
    Но зато появилась новая трабла (на сайте у меня тоже она есть) — если таких инпутов несколько, то при нажатии на «плюс» одного инпута — срабатывают все.
    Помогите разобраться, пожалуйста.
    https://codepen.io/vovaent/pen/bMOxYG/
    Ответить
    
    Denis Creative
    19.05.2018
    Чтобы кнопки работали для каждой формы отдельно, как вариант можно сделать так — https://codepen.io/deniscreative/pen/bMOmGe
    В функциях quantityMinus() и quantityPlus() переменная числового поля $quantityNum задается только возле кнопки, на которую нажали:
    var $quantityNum = $(this).siblings('.quantity-num');
    А что там у вас с одновременным нажатием на две кнопки я не знаю, на codepen все нормально, значит где-то что-то не так у вас с классами или скриптом, или стилями.
    Ответить
    
    Владимир
    19.05.2018
    Понял. Спасибо за помощь. Буду разбираться.
    
    Владимир
    19.05.2018
    Я вас еще не замучал вопросами?))
    Ваш код помог, с несколькими инпутами на странице. Но заметил, что после первого клика не изманяется цифра, а только после второго начинает плюсовать единичку.
    Поможете?
Владимир
19.05.2018
А еще, когда наклацал, например, 7, потом наклацал снова до единицы, и начинаешь опять плюсовать — то выводит 8, 9 и т.д. Тоесть плюсует к 7, а не к 1.
Ответить
- Denis Creative
  20.05.2018
  Исправил код, должен работать — https://codepen.io/deniscreative/pen/bMOmGe
  Ответить
  - Владимир
    20.05.2018
    Благодарю Вас!
    Все работает!
    Осталась, конечно, индивидуальная проблема в том, что при кликах на «+» происходит анимация нажатия и «-» одновременно.
    В codepen.io такой проблемы нет. Может у меня какие-то скрипты друг с другом конфликтуют…
    Их можно как-то проверить на совместимость, кроме консоли в браузере?
    Ответить
    
    Denis Creative
    20.05.2018
    Или дайте ссылку или отключайте скрипты по очереди, проверяйте
    Ответить
Владимир
19.05.2018
В исходном примере для одного инпута, нормально минусует и плюсует.
Ответить
Илья
13.09.2018
Сделал специальный плагин под это numberPlugin всё расписано на русском как подключать, применён уже не на одном реальном сайте есть на github https://github.com/igrok666/numberPlugin
Ответить
- Denis Creative
  13.09.2018
  Чем этот плагин лучше кода описанного в статье?
  По мне, так плагин совсем не гибкий и не очень удобный, под свой дизайн нужно много чего менять.
  Ответить
Илья
18.09.2018
я не говорю что он лучше, просто сделал может кому то понадобится, а то что он ещё не очень гибкий ну над этим работаю ещё в свободное время, а под дизайн ты любой плагин будешь менять, мне ещё не разу не попадалось такого что сразу плагин подходил под макет
Ответить
No48
22.10.2018
JS можно было б и по универсальнее сделать.
Да и батоны закрыть от срабатывания в формах…
Как-то так:
```
  
jQuery( '.quantity-block' ).on( 'click', '.quantity-arrow-minus, .quantity-arrow-plus', function ( event ) {
    event.preventDefault();
    var input = jQuery( this ).siblings( '.quantity-num' );
    if ( input.val() > 0 ) {
        if ( jQuery( this ).hasClass( 'quantity-arrow-minus' )  ) {
            input.val( +input.val() - 1 );
        } else if ( jQuery( this ).hasClass( 'quantity-arrow-plus' ) ) {
            input.val( +input.val() + 1 );
        }
    }
}  );
```
Ответить
- Denis Creative
  23.10.2018
  По поводу «батоны закрыть от срабатывания в формах» согласен.
  По поводу «сделать универсальнее», в вашем коде появилось много операторов if, и мне он не кажется сильно универсальным.
  В вашем примере, при количестве равном «0», кнопки перестанут работать.
  Ответить
Алексей
06.11.2018
При первом клике по кнопку + или — не срабатывает.
При нажатии на кнопку +, а потом на кнопку — ,минус сначала прибавляет значение, а потом начинает убавлять.
Ответить
- Denis Creative
  12.11.2018
  Все работает правильно, в данном примере не может быть число менее 1, так как пример сделан для интернет-магазина для карточки товара.
  Немного изменив код, можно допустить и минусовые значения.
  Ответить
Сергей
14.12.2018
А если будет несколько таких элементов в форме? Тогда при клике на на разный input значение будет меняться только у одного input.
Ответить
- Denis Creative
  14.12.2018
  Ну так вам ничего не мешает немного подправить код под свои задачи. В статье просто приведен пример, который можно уже стилизовать и подстраивать под свои нужды, как захочется.
  Ответить

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

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

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

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

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

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

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

Дмитрий

Владимир

Владимир

Владимир

Владимир

Владимир

Владимир

Владимир

Владимир

Владимир

Владимир

Илья

Илья

No48

Алексей

Сергей