SashaKolbasov
10/24/2017 - 8:20 PM

Custom + / - Input field

Custom + / - Input field

input[type="number"] {
  -moz-appearance: textfield; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.input {
  &-number {
    display: inline-flex;
    button,
    input {
      width: 38px;
      height: 38px;
      border: 1px solid #d8d8d8;
      background-color: #ffffff;
      text-align: center;
      color: #000000;
      font: 16px / 1 "Open Sans";
    }
  }
}
// inputNumber
    $('.input-number button.minus').click(function() {
        var $input = $(this).parents('.input-number').eq(0).find('input[type="number"]');
        var count = parseInt($input.val()) - 1;
        count = count < 1 ? 1 : count;
        $input.val(count);
        $input.change();
        return false;
    });
    $('.input-number button.plus').click(function() {
        var $input = $(this).parents('.input-number').eq(0).find('input[type="number"]');
        $input.val(parseInt($input.val()) + 1);
        $input.change();
        return false;
    });
<div class="input input-number">
  <button class="minus">‐</button>
  <input type="number" name="" id="" class="" value="1">
  <button class="plus">+</button>
</div>