.quantity input[type=number]::-webkit-inner-spin-button,
.quantity input[type=number]::-webkit-outer-spin-button
{
-webkit-appearance: none;
margin: 0;
}
.quantity input[type=number]
{
-moz-appearance: textfield;
}
.quantity input {
width: 70px;
height: 42px;
line-height: 1.65;
float: left;
display: block;
text-align: center;
padding: 0;
margin: 0;
padding-left: 10px;
padding-right: 25px;
border: 1px solid #999;
font-size: 16px;
font-family: 'Poppins', sans-serif;
}
.quantity input:focus {
outline: 0;
}
.quantity-nav {
float: left;
position: relative;
height: 42px;
}
.quantity-button {
position: relative;
cursor: pointer;
border-left: 1px solid #999;
width: 20px;
text-align: center;
color: #333;
font-size: 18px;
line-height: 1.33;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.quantity-button.quantity-up {
position: absolute;
height: 50%;
top: 0;
border-bottom: 1px solid #999;
}
.quantity-button.quantity-down {
position: absolute;
bottom: -1px;
height: 50%;
}
jQuery('').insertAfter('.quantity input');
jQuery('.quantity').each(function() {
var spinner = jQuery(this),
input = spinner.find('input[type="number"]'),
btnUp = spinner.find('.quantity-up'),
btnDown = spinner.find('.quantity-down'),
min = input.attr('min'),
max = input.attr('max');
btnUp.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue >= max) {
var newVal = oldValue;
} else {
var newVal = oldValue + 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
btnDown.click(function() {
var oldValue = parseFloat(input.val());
if (oldValue <= min) {
var newVal = oldValue;
} else {
var newVal = oldValue - 1;
}
spinner.find("input").val(newVal);
spinner.find("input").trigger("change");
});
});