input type="number" の矢印消す

input type="number"を使用すると、デフォルトで矢印がついていますね。
「スピンボタン」と呼ぶそうですが今回は不要のため消してしまいます！


CSSに以下を書いてブラウザのデフォルトスタイルを上書きしていきます。


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

Chrome, Safari, FireFox， IE まとめて書く

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

無事消えました！