屏蔽HTML5 input在type=”number”时的上下加减数字小箭头

最近在项目中遇到了火狐浏览器在input[number]右侧出现上下加减数字小箭头，丑爆了，chrome还好，至少别个只有在聚焦时才现实，firefox则是一直显示，影响体验。再有日常业务中基本用不到这玩意儿，果断屏蔽移除了。

方案一：

以下CSS代码能够有效屏蔽移除浏览number spin-button按钮，已经在chrome66和firefox59中得到测试。

chrome：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

firefox：

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

第二种方案：

将type="number"改为type="tel"，同样是数字类型，但是没有箭头。