How to Customize Type Number Forms [CSS, Javascript]

I had a case where I needed to customize the design of a `type=number` form, so I'm documenting it here. This article was created with reference to the following.

Reference: Customizing Increment Arrows on Input of Type Number Using CSS

HOW TO CUSTOMIZE TYPE NUMBER FORMS

Below is a sample. It removes the default up and down arrows on the right and adds plus and minus buttons to the left and right.

HTML

text

<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

css

.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. When considering cross-browser compatibility, it is recommended to set it in these three places:

・ `-webkit-appearance` for `::-webkit-inner-spin-button`

・ `-webkit-appearance` for `::-webkit-outer-spin-button`

With these settings, the default arrows should disappear from your Type Number form.

INSTALLING CUSTOMIZABLE BUTTONS

In the sample, we've installed plus and minus buttons instead of the up and down arrows.

In terms of CSS, they are simply floated using `position`. Now, we'll add functionality to these buttons using jQuery to change the form's content.

jQuery to control type number forms

javascript

$('.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']();
});

By using this, we are changing the content of the form. It's quite versatile! By the way, if you check `input` with `console.log`, it seems like there are many other ways it can be used. I'd like to introduce them again if I get the chance.

BONUS

css

.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;
}

RECOMMENDED CSS/SASS BOOKS

For CSS and SCSS, once you understand the basics, I think it's faster to just look things up with 'Google-sensei'. If you understand the mechanisms of CSS and how to use SASS, you're generally good to go.

HTML & CSS and Web Design Introductory Course: Learn Everything in One Book

📦

Amazon で関連書籍・ツールを検索

CSS frontend design book

Amazonで探す →（アソシエイトリンク）