How to customize Type Number form [CSS, Javascript]

In the form design, there was a case of customizing the form of type=number, so I will leave it in the article. It is created by referring to the following article.
Reference:Customizing Increment Arrows on Input of Type Number Using CSS

How to customize Type Number Form

It will be the following sample. The up and down arrows on the right side of the default have been deleted, and plus and minus buttons have been added to the left and right.
Press the left and right buttons to move the numbers on the form up or down.

HTML

<div class="form-type-number">
    <input id="quantity" max="10" min="1" name="quantity" type="number" />
    <div class="btn-minus">-</div>
    <div class="btn-plus">+</div>
</div>

 

SASS

.form-type-number {
    position: relative;
    height: 50px;
    input {
        appearance: none;   /* Initialize the appearance */
        position: absolute;
        top: 0;
        display: block;
        width: 100%;
        height: 50px;
        padding: 0 50px;
        text-align: center;
        background-color: lightblue;
        border-radius: 4px;
        border: none;
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;　　　/* Clear default arrow */
        } 
        &::-webkit-outer-spin-button {
            -webkit-appearance: none;　　　/* Clear default arrow */
        }
    }
    .btn-minus, .btn-plus { position: absolute;
        top: 10px;
        width: 30px;
        height: 30px;
        border: none;
        background-color: lawngreen;
        text-align: center;
    }
    .btn-minus {
        left: 10px;
    }
    .btn-plus {
        right: 10px;
    }
}

To explain, there are three places where appearance is set. Considering cross-browser, it is recommended to set in the following three places.
・ Appearance of input tag
・ ::-webkit-inner-spin-button -webkit-appearance
・ ::-webkit-outer-spin-button -webkit-appearance
You should now see the default display arrow disappear from the Type Number form.

Install customizable buttons

In the sample, plus and minus buttons are installed instead of the up and down.
(In sass .btn-minus.btn-plus)
In terms of CSS, it just floats using position. Now add the ability to change the content of the form with jQuery to this button.

jQuery that controls the form of type number

$('.btn-minus').on('click', function(e) {
    var input = $(e.target).closest('.form-type-number').find('input');
    input[0]['stepDown']();
});
$('.btn-plus').on('click', function(e) {
    var input = $(e.target).closest('.form-type-number').find('input');
    input[0]['stepUp']();
});

input[0]['stepDown']();
input[0]['stepUp']();
By using above, the contents of the form are changed. You can do this. By the way, if you check the input in console.log, it seems that you can use it in various other ways. If I have a chance to use it, I would like to introduce it again.

bonus

For the time being, CSS too.

.form-type-number {
    position: relative;
    height: 50px;
}
input {
    appearance: none;
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 50px;
    padding: 0 50px;
    text-align: center;
    background-color: lightblue;
    border-radius: 4px;
    border: none;
}
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;
}
.btn-plus {
    position: absolute;
    top: 10px;
    width: 30px;
    height: 30px;
    border: none;
    background-color: lawngreen;
    text-align: center;
}
.btn-plus {
    position: absolute;
    top: 10px;
    width: 30px;
    height: 30px;
    border: none;
    background-color: lawngreen;
    text-align: center;
}