如何移除HTML5的type=""number""的input标签的上下箭头

最新推荐文章于 2026-07-01 16:07:30 发布

转载最新推荐文章于 2026-07-01 16:07:30 发布 · 281 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/stella1024/p/7194976.html

收录于

当前文章被以下社区和专栏收录：

本文介绍如何通过CSS和更改input类型移除HTML中type=number输入框的上下箭头，提供两种有效方法实现自定义数字输入框样式。

初次使用input的数字输入类型type="number"时会发现默认有个上下的箭头,如下图:

很明显这里不需要这个默认箭头,那么我们如何移出这个默认样式呢?

第一种方式,写css兼容代码 :

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{

-webkit-appearance: none !important;
margin: 0;
} // chrome

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

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{

    -webkit-appearance: none !important;
    margin: 0; 
}                                                                                 // chrome

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

第二种方案,很简单,就是将type="number"改为type="tel"，同样是数字键盘，但是没有箭头。