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

李维亮

发布于 2021-07-09 10:56:36

1.6K0

发布于 2021-07-09 10:56:36

文章被收录于专栏：李维亮的博客

在chrome下：

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

在Firefox下：

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

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

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

第二种方案：

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-08-02，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度