JSFiddle - React, Tailwind, and code Playground

by Serg Sagan

HTML

<div class="number">
  <span class="minus"></span>
  <input type="text" value="1" size="5" placeholder="">
  <span class="plus"></span>
</div>

CSS

.number {
  width: 80px;
  height: 28px;
  border: 1px solid #dddddd;
  background-color: white;
  position: relative;
  display: inline-block;
}

.minus,
.plus {
  display: inline-block;
  width: 20px;
  color: #ff2a31;
}

.minus:after {
  content: '';
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 2px;
  top: 12px;
  left: 4px;
  background: url(../img/minus.png) 0 0 no-repeat;
  cursor: pointer;
}

.plus:before {
  content: '';
  display: inline-block;
  position: absolute;
  width: 10px;
  height: 11px;
  text-align: center;
  top: 7px;
  right: 6px;
  background: url(../img/plus.png) 0 0 no-repeat;
  cursor: pointer;
}

input {
  border: none;
  outline: none;
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  height: 26px;
  text-align: center;
}

JavaScript

$('.minus').click(function() {
  var $input = $(this).parent().find('input');
  var count = parseInt($input.val()) - 1;
  count = count < 1 ? 1 : count;
  $input.val(count);
  $input.change();
  return false;
});
$('.plus').click(function() {
  var $input = $(this).parent().find('input');
  $input.val(parseInt($input.val()) + 1);
  $input.change();
  return false;
});