移除input在type="number"时的上下箭头
网页在有些情况下,会需要input的输入的为单纯数字的文本框,此时type=number,但使用type=number时,输入框后面会有一个上下箭头,那么如何去掉上下箭头呢?
<input type="number" ...> <style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
input[type="number"]{
-moz-appearance: textfield;
}
</style>
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"时的上下箭头的更多相关文章
- 移除HTML5 input在type="number"时的上下小箭头
/*移除HTML5 input在type="number"时的上下小箭头*/ input::-webkit-outer-spin-button, input::-webkit-in ...
- input输入框type=number时的一个缺陷
本来是在vue里发现获取不到 input[ type="number"]的值,就是输入两个小数点的数值,比如1.1.1,以为是vue的错误,然而不是,vue只做了数字处理 不明白为 ...
- 怎么去掉select的下拉箭头和输入框input类型为number时的上下箭头
一.去掉select的下拉箭头 方法一:在select外面加一个div,设置select宽度大于div的宽度,并加一个超出隐藏属性overflow:hidden,小三角会隐藏掉: 方法二:给selec ...
- 如何移除HTML5 input在type="number"时的上下小箭头
在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance ...
- 【转】移除HTML5 input在type="number"时的上下小箭头
在chrome下: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance ...
- 去掉input在type="number"时右边的上下箭头
加了代码之后: input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{ -webkit-appearance: none ...
- 移除input框type="number"在部分浏览器的默认上下按钮
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none !impor ...
- input type="number"时,maxlength不起作用怎么解决
最近小颖在做公司的angular项目时,发现当input type="number"时,maxlength不起作用,百度了下解决方式,顺便记录下,以便后期查看嘻嘻 <inpu ...
- 如何移除 input type="number" 时浏览器自带的上下箭头?
Chrome 下 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: no ...
随机推荐
- CocosCreator 场景转换API
一.CocosCreator场景的切换API: cc.director.loadScene( ‘场景名称’);//场景切换必须使用的API 通过场景名称进行加载场景时,常用的就是上边的API,但是版本 ...
- C#高级编程9 第16章 错误和异常
C#高级编程9 第16章 错误和异常 了解这章可以学会如何处理系统异常以及错误信息. System.Exception类是.NET运行库抛出的异常,可以继承它定义自己的异常类. try块代码包含的代码 ...
- react-native布局篇
原文链接:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native%E5%B8%83%E5%B1%80/ 一.宽度和 ...
- WordPress主题开发:输出指定页面导航
实例: <ul> <li class="widget widget_nav_menu"> <?php if(is_page(array(12,14,1 ...
- 微信小程序 scroll-view 实现锚点跳转
在微信小程序中,使用 scroll-view 实现长页面的标记跳转,官方文档中没有例子演示,锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性. 实现 ...
- Kafka:ZK+Kafka+Spark Streaming集群环境搭建(二十九):推送avro格式数据到topic,并使用spark structured streaming接收topic解析avro数据
推送avro格式数据到topic 源代码:https://github.com/Neuw84/structured-streaming-avro-demo/blob/master/src/main/j ...
- Android性能优化-减小图片下载大小
原文链接 https://developer.android.com/topic/performance/network-xfer.html 内容概要 理解图片的格式 PNG JPG WebP 如何选 ...
- Visual Studio 打开程序提示仅我的代码怎么办
工具-->选项--->调试---->常规-->禁用"启动仅我的代码"
- 原创:vsphere概念深入系列一:关于vsphere虚拟交换机的端口的数量限制。
总结出来的概念: vm上有多少个虚拟网卡就被分配了多少个vPort.vswitch缺省情况下有8个vmk端口(vport)保留给vmkernel使用.但是当vport不够的时候也可以被使用. 默认第一 ...
- Duplicate复制数据库并创建物理StandBy(spfile+不同实例名+不同路径)
过程和Duplicate复制数据库并创建物理StandBy类似,只是不需要重启数据库. 目的:创建standby,不重启源数据库 1设定环境如下: Primary数据库 IP 172.17.22.16 ...