Input type number стилизация
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, стрелка вверх и стрелка вниз. Все эти три элемента можно стилизовать так, как вам это необходимо.
Полезные ссылки
- Шпаргалка по использованию jQuery
- Выполнение js в зависимости от ширины экрана ссылка
- Статья про валидацию input.
- Стилизация input type file.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Поделиться с друзьями:
Статьи из данной категории:
Комментарии (1)
- Котик
Если вдруг кому нужно на чистом JS:
// input type number const total = document.querySelector('.input-number__input'), min = 1, max = 99; // Уменьшаем на 1 document.querySelector('.input-number__minus').addEventListener('click', () => { if (total.value > min) { total.value = +total.value - 1; } }); // Увеличиваем на 1 document.querySelector('.input-number__plus').addEventListener('click', () => { if (total.value < max) { total.value = +total.value + 1; } }); // Запрещаем ввод текста document.querySelectorAll('.input-number__input').forEach(function(el) { el.addEventListener('input', function() { this.value = this.value.replace(/[^d]/g, ''); }); });