<input type="number">のスピンボタン（上下の矢印ボタン）をCSSで非表示にする

この矢印のやつを消す方法です。

Chrome, Safari

CSS

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

FireFox， IE

CSS

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

CSSのクラスを指定して、Chrome, Safari, FireFox， IE まとめて書く

CSS

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

HTML

 <input type="number" class="no-spin">

CSSのクラスを指定して、!importantで最優先にしてまとめて書く

CSS

.no-spin::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
    -moz-appearance:textfield !important;
}

消えました！

参考URL：

数字のみを入力できるフォーム(テキストボックス)を作成する
HTML5入力タイプの数値矢印をCSSクラスで非表示にしますか？
INPUTタグ type numberの時に表示される矢印ボタン(スピンボタン)を消す方法
とほほのWWW入門 > CSS - !important