システムを作成中にフォーム（form）で数値入力をさせたい項目があり、input type=”number”を使用しているのですが、お客様から▲矢印の上下ボタン（スピンボタン）を消して欲しいとご依頼がありました。
理由は、数値を入力した後に、カーソルが input type=”number” に残ったままで、マウスホイールでスクロールしようとすると、入力した数値が増減してしまうからでした。
ユーザビリティを考えられて実装されているのだとは思いますが、事務系のシステムの場合は、数値をテンキー等で入力することが多く、ボタンが不必要な事が多いようです。
なので、今回は▲矢印の上下ボタン（スピナー）を消す方法をご紹介します。
CSSで削除する方法
消す方法はとても簡単で、CSSに以下のコードを追記するだけで削除できます。
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance:textfield;
}Chrome、SafariとFireFox，IEは別の記載となっており、上部が ChromeとSafariの制御となり、下部がFireFoxとIEの制御となります。
実際に削除してみたinput type=”number” のサンプルが以下となります。
先日掲載した「フォーム input type=”number” で小数点を入力する方法」と比べていただければ、わかりやすいかと思います。
まとめ
今回は事務系のシステムでしたので、パソコンでの入力に慣れておられる方が実際に使用されますので、▲矢印の上下ボタン（スピンボタン）が不必要な機能となりました。
フォームの部品はユーザビリティを考えられて作られてはいますが、実際に使われる方にとって逆に不便になったり、予期しない動きとなり、間違った値を登録してしまう可能性もあります。
今までも使い勝手の良さを考えていましたが、 改めて誰がどのようにして使用するかを考えて作っていかなければならないと、考えさせられました。
