移除HTML5 input在type="number"时的上下小箭头

2021-07-09 10:56:36 浏览数 (2)

在chrome下：

代码语言：javascript复制

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

在Firefox下：

代码语言：javascript复制

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

如果感觉还不放心，吧下面的这段加上

代码语言：javascript复制

input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

第二种方案：

将type="number"改为type="tel"，同样是数字键盘，但是没有箭头，但是这样会有一个问题无法设置input的 max和min 值了，当还有step，当然如果你想用这种方案的话可以利用input的 pattern 属性来正则加验证。

0 人点赞