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

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).on('input', '.input-number__input', function () {
        if (this.value.match(/[^0-9]/g)) {
            this.value = this.value.replace(/[^0-9]/g, '');
        }
    });

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

    // document.querySelectorAll('.inputTN__input').forEach(function (el) {

    //     el.addEventListener('input', function () {

    //         this.value = this.value.replace(/[^\d]/g, '');

    //     });

    // });


});

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

Input type number - стрелки по бокам

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

Структура блока с input type number.

<div class="input-number">
    <div class="input-number__minus">-</div>
    <input class="input-number__input" type="text" pattern="^[0-9]+$" value="1">
    <div class="input-number__plus">+</div>
</div>

Стили.

/* input type number */
.input-number {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #E5E8EE;
    box-sizing: border-box;
    border-radius: 6px;
    color: #424348;
    font-size: 14px;
    text-align: center;
    width: calc(33px * 3);
}

.input-number__input {
    background: #E5E8EE;
    width: 32px;
    height: 32px;
    border: none;
    padding: 8px;
    text-align: center;
}

.input-number__minus,
.input-number__plus {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
}
/* /input type number */

SASS

.input-number 

    display: flex 

    align-items: center 

    background: #FFFFFF 

    border: 1px solid #E5E8EE 

    box-sizing: border-box 

    border-radius: 6px 

    color: #424348 

    font-size: 14px 

    text-align: center 

    width: calc(33px * 3) 



.input-number__input 

    background: #E5E8EE 

    width: 32px 

    height: 32px 

    border: none 

    padding: 8px 

    text-align: center 



.input-number__minus,

.input-number__plus 

    width: 32px 

    height: 32px 

    display: flex 

    align-items: center 

    justify-content: center 

    cursor: pointer 

    user-select: none

Скрипты.

jQuery(($) => {
    // input type number

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

    $(document).on('click', '.input-number__minus', function () {
        let total = $(this).next();
        if (total.val() > 1) {
            total.val(+total.val() - 1);
        }
    });
    // Увеличиваем на 1

    $(document).on('click', '.input-number__plus', function () {
        let total = $(this).prev();
        total.val(+total.val() + 1);
    });
    // Запрещаем ввод текста

    document.querySelectorAll('.input-number__input').forEach(function (el) {
        el.addEventListener('input', function () {
            this.value = this.value.replace(/[^\d]/g, '');
        });
    });
});
Демонстрация

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

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

  1. Шпаргалка по использованию jQuery
  2. Выполнение js в зависимости от ширины экрана ссылка
  3. Статья про валидацию input.
  4. Стилизация input type file.
admin