Skip to content

Instantly share code, notes, and snippets.

@SashaKolbasov
Last active October 24, 2017 23:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save SashaKolbasov/6fb9ee99a9146effd5c469d159604514 to your computer and use it in GitHub Desktop.
Save SashaKolbasov/6fb9ee99a9146effd5c469d159604514 to your computer and use it in GitHub Desktop.
Custom + / - Input field
<div class="input input-number">
<button class="minus">‐</button>
<input type="number" name="" id="" class="" value="1">
<button class="plus">+</button>
</div>
// 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;
});
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";
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment