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, стрелка вверх и стрелка вниз. Все эти три элемента можно стилизовать так, как вам это необходимо.
Полезные ссылки
- Шпаргалка по использованию jQuery
- Выполнение js в зависимости от ширины экрана ссылка
- Статья про валидацию input.
- Стилизация input type file.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.