Hirooooo’s Labo

開発メモ、ガジェット、日記、趣味など、思った事を思ったまんま書くブログ

HTML5のINPUTタグで type numberの時に表示される増減ボタン(スピンボタン)を非表示にする方法

f:id:hirooooo-lab:20170808174353j:plain

HTML5で追加された便利な機能がたくさんあると思います。

Web画面開発時によく使用するINPUTタグ
そのINPUTタグのtype属性もたくさん追加されました。

今日はそのINPUTタグのtype=numberの時に表示される右側の増減ボタン(スピンボタン)を非表示にする方法です。

inputタグのtype number

HTML5において、inputタグでtype=numberにすると、数値専用の入力欄となります。

アルファベットの入力などは受け付けず、数値のみの入力だけが可能となり便利なのですが、ブラウザのデフォルト機能で入力欄の右側に増減ボタン(スピンボタン)が表示されてしまいます。

↓これ
f:id:hirooooo-lab:20170808174810p:plain

ちなみに、INPUTタグの詳しい説明はこちらのページが大変参考になります。

www.htmq.com

INPUTタグの増減ボタンを消すには?

この増減ボタンを消してあげるためには、ブラウザのデフォルトスタイルを上書きして上げる必要があります。

各ブラウザに合わせた以下のスタイルを追加しましょう。

Chrome、Safariの場合

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

FireFox,IEの場合

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

増減ボタンが消えました

そうするとこんな感じで増減ボタン(スピンボタン)が表示されなくなります。
f:id:hirooooo-lab:20170808174944p:plain

誰かの参考になれば幸いです。