Input type number стилизация

<div class="inputTN">
  <input class="inputTN__input"type="text" pattern="^[0-9]+$" value="0">
  <div class="inputTN__top"></div>
  <div class="inputTN__bottom"></div>
</div>

.inputTN {
  position: relative;
}

.inputTN__input {
  border-radius: 7px;
  padding-left: 10px;
  padding-right: 20px;
  border: 1px solid #d0c4db;
  outline: none;
  width: 77px;
  height: 33px;
  transition: .2s;
}

.inputTN:hover .inputTN__input,
.inputTN:focus .inputTN__input {
  border-color: #888;
}

.inputTN__top {
  width: 0px;
  border: 5px solid transparent;
  border-bottom: 7px solid #d0c4db;
  position: absolute;
  top: 5%;
  right: 5px;
  cursor: pointer;
  transition: .2s;
}

.inputTN__top:hover{
  border-bottom-color: #888;
}

.inputTN__bottom {
  width: 0px;
  border: 5px solid transparent;
  border-top: 7px solid #d0c4db;
  position: absolute;
  top: 60%;
  right: 5px;
  cursor: pointer;
  transition: .2s;
}

.inputTN__bottom:hover {
  border-top-color: #888;
}

jQuery(($) => {

    // Уменьшаем на 1

    $(document).on('click', '.inputTN__bottom', function () {
        let total = $(this).prev().prev();
        if ( total.val() > 1 ) {
            total.val(+total.val() - 1);
        }
    });

    // Увеличиваем на 1

    $(document).on('click', '.inputTN__top', function () {
        let total = $(this).prev();
        total.val(+total.val() + 1);
    });

    // Запрещаем ввод текста

    document.querySelector('.inputTN__input').addEventListener('input', function () {
        this.value = this.value.replace(/[^\d]/g, '');
    });

});