Custom + / - Input field
input[type="number"] {
-moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0; }
.input {
&-number {
display: inline-flex;
button,
input {
width: 38px;
height: 38px;
border: 1px solid #d8d8d8;
background-color: #ffffff;
text-align: center;
color: #000000;
font: 16px / 1 "Open Sans";
}
}
}
// inputNumber
$('.input-number button.minus').click(function() {
var $input = $(this).parents('.input-number').eq(0).find('input[type="number"]');
var count = parseInt($input.val()) - 1;
count = count < 1 ? 1 : count;
$input.val(count);
$input.change();
return false;
});
$('.input-number button.plus').click(function() {
var $input = $(this).parents('.input-number').eq(0).find('input[type="number"]');
$input.val(parseInt($input.val()) + 1);
$input.change();
return false;
});
<div class="input input-number">
<button class="minus">‐</button>
<input type="number" name="" id="" class="" value="1">
<button class="plus">+</button>
</div>