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

• input numberの矢印を消したい
• HTML5タグって便利だよね

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

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

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

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

inputタグのtype numberって？

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

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

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

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で困ってる誰かの参考になれば嬉しいです。

おすすめ本

【全国の書店員さんがオススメする本「CPU大賞」第1位受賞! 】

絶対読んでおいて損はない本だと思います！

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 [ Mana ]

created by Rinker

¥2,411 (2024/10/12 19:02:27時点 Amazon調べ-詳細)

• Kindleで探す
• Amazonで探す
• 楽天市場で探す
• Yahoo!ショッピングで探す