Type Number のフォームをカスタマイズする方法[CSS,Javascript]

0

フォームのデザインで、type=numberのformをカスタマイズするケースがあったので記事に残しておきます。下記記事を参考にして作成しています。
参考　：　Customizing Increment Arrows on Input of Type Number Using CSS

Type NumberのFormのカスタマイズ方法

下記サンプルになります。デフォルトの右側にある上下矢印を消し、左右にプラスとマイナスボタンを追加しています。
左右のボタンを押すとフォームの数字が上下します。

–
+

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

解説すると、appearanceを設定している箇所が3箇所あります。クロスブラウザを考慮した場合、下記三箇所に設定することをお勧めします。
・inputタグのappearance
・::-webkit-inner-spin-buttonの-webkit-appearance
・::-webkit-outer-spin-buttonの-webkit-appearance
これで、デフォルト表示の矢印がType Numberのフォームから消えると思います。

カスタマイズ可能なボタンを設置

サンプルでは上下の代わりに、プラスマイナスのボタンを設置しています。
(Sassの.btn-minus.btn-plus)
CSS的には、positionを使用して浮かしているだけです。このボタンに、今度はjQueryでフォームの内容を変更する機能を追加します。

type numberのformをコントロールするjQuery

$('.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']();
を使うことで、フォームの中身を変更しています。こんなことができるんですね。ちなみに、inputをconsole.logで確認すると、他にもさまざまな使い方ができそうです。使う機会があればまた紹介したいと思います。

おまけ

一応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;
}

 

CSS/SASSのおすすめ書籍

CSSやSCSSは基本がわかればあとはGoogle先生で調べた方が早いと思います。CSSの仕組みやSASSの使い方だけわかれば基本はOKです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
htmlの基礎から学べるのでおすすめ

Web制作者のためのSassの教科書
SASSの基本が学べます。