(转)在html5中如何使i他type为number类型的输入框去掉上下图标

转载至:

https://www.cnblogs.com/intangible/p/6291493.html

1、chrome浏览器移除

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
}

使用none替代textfield,也可以实现去除箭头的效果

2、firefox浏览器下移除

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

 在firefox浏览器下使用none替代textfield没有效果。

3、用type="tel"代替

  input[type="tel"]的value值亦是number,且其没有type="number"时的上下箭头,故我们可以用[type="tel"]代替[type="number"],达到一样的效果,并通过设置maxlength = "m"限定value值得长度。如果有其他的要求,可以通过正则来判断。

posted @ 2018-05-21 00:46  逐风一缕  阅读(923)  评论(0编辑  收藏  举报