input type="number" の使い方とスピンボタンの消し方

数字の入力項目で何かとお世話になる<input type="number">ですが、
デフォルトだとスピンボタン（上下の矢印）が付いていて見た目が気になったりします。

小さい入力欄だとこのスピンボタンが邪魔になってくる場合もあるかと思います。
今回はそんな<input type="number">の使い方とスピンボタンの消し方について解説していきます。

input type="number" の使い方

まずはhtmlで<input type="number">を記述しただけの状態です。

See the Pen input-number-sumple1 by Usagi (@naniwa_usagi) on CodePen.

初期の状態ではカーソルを当てたときにスピンボタンが表示されます。

スピンボタンの上下ボタンはデフォルトで１ずつ数字を変化させますが、htmlタグにstepパラメータを付与すると1回に変化する値を変化させることができます。

たとえば1回に0.1ずつ値を変化させたい場合はstep=0.1をオプションに追加しましょう。

See the Pen input-number-sumple2 by Usagi (@naniwa_usagi) on CodePen.

スピンボタンの消し方

スピンボタンはCSSで消すことができます。適用例は以下の通り。

ブラウザによって記述内容が変わるので複数のブラウザで対応したい場合は両方の設定を記述するようにしてください。

Chrome, Safari

input[type="number"]::-webkit-outer-spin-button, 
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

FireFox

input[type="number"] {
  -moz-appearance: textfield; 
}

ブラウザ別の設定を1つにまとめて書くと見た目がおかしくなる場合があるので注意してください。

（補足）CSSのクラス指定でブラウザごとの設定をまとめる方法

ブラウザ別の設定をまとめる場合はinputタグにクラス名を追加して、クラスに対してCSSを適用しましょう。

.hide-spin::-webkit-inner-spin-button,
.hide-spin::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance:textfield;
}

See the Pen input-number-sumple3 by Usagi (@naniwa_usagi) on CodePen.

まとめ

今回のまとめです。

• <input type="number">はスピンボタンがデフォルトでついている。
• スピンボタンはstepパラメータで1回のクリックで上下する値を変更できる。
• スピンボタンはCSSで消すことができる。