JSFiddle - React, Tailwind, and code Playground
HTML
<label>Quantity</label>
<input id="quantity" type="number" name="quantity" value="1" min="1" class="tc item-quantity" />
<img class="plus" src="https://cdn1.iconfinder.com/data/icons/huge-basic-icons/20/Create.png" />
<img class="minus" src="http://21-novacasino.com/wp-content/themes/QuenchMag/images/minus-icon-small.gif" />
CSS
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
JavaScript
$('.plus').click(function(){
var value = $('#quantity').val();
$('#quantity').val(parseInt(value)+1);
});
$('.minus').click(function(){
var value = $('#quantity').val();
$('#quantity').val(parseInt(value)-1);
});