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

Сегодня рассмотрим как можно стилизовать input type number. А если быть точным, то как его создать таким, каким душе угодно.

Разметка:

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

Стилизация

.input-number {
    position: relative;
}

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

.input-number:hover .input-number__input,
.input-number:focus .input-number__input {
    border-color: #888;
}

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

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

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

.input-number__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 */

Скрипты.

jQuery(($) => {

    // Уменьшаем на 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('keydown', function (event) {
            // Разрешаем: backspace, delete, tab
            if (event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 ||
                // Ctrl+A
                (event.keyCode == 65 && event.ctrlKey === true) ||
                // ← →
                (event.keyCode >= 35 && event.keyCode <= 39)) {
                return;
            } else {
                // Только цифры
                if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105)) {
                    event.preventDefault();
                }
            }

        });
    });
});

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

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