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

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

<div class="quantity">
  <span class="quantity-arrows minus"> - </span>
  <input type="number" />
  <span class="quantity-arrows plus"> + </span>
</div>

Такой примитивный Скрипт

(function quantityProducts() {
  
  $(".quantity").find("span").click(function () {
    var calc = $(this).parent().find(".qty");
    var calcText = calc.val();
    if ($(this).hasClass("minus") && calcText > 1) {
      calc.val(+calcText - 1);
    }
    else if ($(this).hasClass("plus")) {
      calc.val(+calcText + 1);
    }
  });

})();