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

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

JavaScript

$(function() {

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

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

});

Обратите внимание, должен быть подключен jQuery

Демонстрация

В итоге мы получили три элемента: сам input, стрелка вверх и стрелка вниз. Все эти три элемента можно стилизовать так, как вам это необходимо

Полезные ссылки

  • Шпаргалка по использованию jQuery
  • Выполнение js в зависимости от ширины экрана ссылка
admin
19/11/2019 09:54