码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-09-05 10:32:44      阅读:131      评论:0      收藏:0      [点我收藏+]

标签:效果   nbsp   spi   font   -o   max   替代   input   有一个   

网页在有些情况下,会需要input的输入的为单纯数字的文本框,此时type=number,但使用type=number时,输入框后面会有一个上下箭头,那么如何去掉上下箭头呢?

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值得长度。如果有其他的要求,可以通过正则来判断。

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

标签:效果   nbsp   spi   font   -o   max   替代   input   有一个   

原文地址:https://www.cnblogs.com/gopark/p/9590421.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!