INPUTタグ type numberの時に表示される矢印ボタン(スピンボタン)を消す方法

Development
この記事は約2分で読めます。
  • input numberの矢印を消したい
  • HTML5タグって便利だよね

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

Web画面開発時によく使用するINPUTタグ

そのINPUTタグのtype属性もたくさん追加されました。

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

この記事でわかること
  • input type=numberの時に出るスピンボタンを消す方法
スポンサーリンク

inputタグのtype numberって?

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

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

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

<input>-HTML5タグリファレンス
HTML5のタグ解説

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

cssで無事矢印が消えました 

ブラウザに合わせてcssを上書きしてあげることで、矢印(スピンボタン)が表示されなくなりました。

やったぜ!矢印が消えた!

input type numberで困ってる誰かの参考になれば嬉しいです。

コメント

  1. […] INPUTタグ type numberの時に表示される矢印ボタン(スピンボタン)を消す方法|… 未分類 シェアする Twitter Facebook はてブ Pocket LINE コピー 管理人をフォローする 管理人 メモブログ […]

タイトルとURLをコピーしました