关于如何解决当type=number时，加减箭头的处理；

最新推荐文章于 2025-02-07 11:20:50 发布

转载最新推荐文章于 2025-02-07 11:20:50 发布 · 2.1k 阅读

本文介绍如何通过CSS样式禁用谷歌和火狐浏览器中数字输入框(type=number)的上下箭头，实现自定义输入框外观。

<body>
<input type="number">
</body>

以下是分别针对谷歌和火狐浏览器下type="number"的处理；<style>
input::-webkit-outer-spin-button,            
input::-webkit-inner-spin-button{               
    -webkit-appearance: none !important;           
 }
</style>以上是对谷歌的；下面是对于火狐的；

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