移除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 ...
随机推荐
- spring源码分析系列
spring源码分析系列 (1) spring拓展接口BeanFactoryPostProcessor.BeanDefinitionRegistryPostProcessor spring源码分析系列 ...
- 图文并茂 —— 基于Oozie调度Sqoop
利用大数据来做BI分析的时候,必不可少需要设置一些调度任务. 本篇就讲述一下如何利用hue来编辑shell操作,这里面的很多操作在其他的调度操作里面也是可以借鉴的. 如果是linux里面可以直接执行的 ...
- c++内存管理的一些资料
C++内存分配方式详解--堆.栈.自由存储区.全局/静态存储区和常量存储区 如何动态调用DLL中的导出类 在dll中导出类,并结合继承带来的问题 如何更好的架构一个界面库,欢迎大家一起讨论 pim ...
- 细说ASP.NET Windows身份认证
上篇博客我谈到了一些关于ASP.NET Forms身份认证方面的话题,这次的博客将主要介绍ASP.NET Windows身份认证. Forms身份认证虽然使用广泛,不过,如果是在 Windows Ac ...
- AngularJS中的transclusion案例
AngularJS中的transclusion类似于包含关系. 通常,这样定义一个directive: <mydirective someprop=""></my ...
- Delphi中COM自动化对象中使用事件
unit SrvUnit2; interface uses ComObj, ActiveX, AxCtrls, Classes, SrvEvent_TLB, StdVcl, Srvunit1; typ ...
- C#中使用 SendMessage 向非顶端窗体发送组合键
开门见山,不废话了, 直接举例说明一下: 比如发送ALT + F 以下是 用spy++截取的消息内容 <00001> 000310DC P WM_SYSKEYDOWN nVirtKey:V ...
- 04-树5 Root of AVL Tree + AVL树操作集
平衡二叉树-课程视频 An AVL tree is a self-balancing binary search tree. In an AVL tree, the heights of the tw ...
- eclipse-修改启动JDK版本
打开eclipse安装目录下的eclipse.ini文件,将红色内容加入 -vm ../Java/jdk1.6.0_26/bin (或者指向具体目录:D:/software/jdk_1.8u91/bi ...
- vim 在行首 行尾添加字符
在行首添加字符: %s/^/your_word/ 在行尾添加字符 %s/$/your_word/