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

屏蔽HTML5 input在type=

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

方案一:

以下代码能够有效屏蔽移除浏览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[='number'] {
    -moz-appearance:textfield;
}

第二种方案:

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