在Chrome与火狐中，输入框input类型为number时，如何去除掉的自带的上下默认箭头...

最新推荐文章于 2024-07-23 11:10:15 发布

weixin_30363981

最新推荐文章于 2024-07-23 11:10:15 发布

阅读量510

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ziChin/p/10274778.html

本文介绍如何通过CSS样式去除HTML中input[type=number]元素在Chrome和Firefox浏览器上显示的上下箭头，实现自定义输入框样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何移除input='number'时浏览器自带的上下箭头：

CSS样式：

    /* 去除input[type=number]浏览器默认的icon显示 */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button { // chrome
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
    }
    input{ // 火狐
        -moz-appearance:textfield;
    }