火狐谷歌浏览器去掉input type=number时控件的方法

简介: 火狐谷歌浏览器去掉input type=number时控件的方法

html


默认:<input type="number" /></br>
处理:<input type="number" class="deal-with" />


css 去除控件


<style type="text/css">
.deal-with::-webkit-textfield-decoration-container {
    background-color: #f0f3f9;
}   
/*下边两行是去掉input 输入框右边的上下箭头按钮 */
.deal-with::-webkit-inner-spin-button {
   -webkit-appearance: none;
}
.deal-with::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
</style>


写到这里你是不是已经觉得这样做很ok了。


觉得很完美了


但是如果你是用的是火狐浏览器的话


以上代码完全就没有起到任何的作用了


上下的控件任然显示出来了


怎么处理


/* 针对火狐 */
input{ 
   -moz-appearance:textfield;
}


你会发现解决了控件


但是有会出现一个新的问题


可以输入汉字了;不能限制类型的的处理


违背了我们设置为 type=number 的初衷


经过大量的查阅资料,


.由于火狐里=对 input type =“number” 这个属性的支持不太友好


对于这个属性慎用慎用  我个人不建议使用 <input type="number" />


因为这个是H5的新特性  对他支持还不是太友好的!!!!

相关文章
|
4月前
|
Linux iOS开发 MacOS
谷歌浏览器中的谷歌翻译失效了?如何解决谷歌翻译不响应问题?
本文分析了谷歌翻译在谷歌浏览器中失效的原因,并提供了针对Mac OS、Windows和Linux系统的解决方案,包括下载和执行特定软件以修复翻译服务不响应的问题。
373 0
谷歌浏览器中的谷歌翻译失效了?如何解决谷歌翻译不响应问题?
|
4月前
|
存储 缓存 前端开发
前端谷歌浏览器面版属性
【8月更文挑战第19天】前端谷歌浏览器面版属性
53 0
|
2月前
|
Web App开发 安全 中间件
谷歌、火狐、Edge等浏览器如何使用ActiveX控件
allWebPlugin 是一款为用户提供安全、可靠且便捷的浏览器插件服务的中间件产品,支持 Chrome、Firefox、Edge 和 360 等浏览器。其 V2.0.0.20 版本支持一个页面加载多个插件,并解决了插件与浏览器之间的焦点问题。用户可通过“信息化系统 + allWebPlugin + 插件 + 浏览器”的解决方案实现 ActiveX 插件的无缝集成。下载地址见文末,安装包含详细说明。
|
5月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
2月前
|
Web App开发 SQL 数据库
使用 Python 解析火狐浏览器的 SQLite3 数据库
本文介绍如何使用 Python 解析火狐浏览器的 SQLite3 数据库,包括书签、历史记录和下载记录等。通过安装 Python 和 SQLite3,定位火狐数据库文件路径,编写 Python 脚本连接数据库并执行 SQL 查询,最终输出最近访问的网站历史记录。
44 4
|
2月前
|
算法 安全 前端开发
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
基于postMessage和BroadcastChannel实现浏览器跨Tab窗口通信的方法介绍
98 0
|
4月前
|
Web App开发
Chrome——谷歌浏览器chrome如何模拟其他客户端
Chrome——谷歌浏览器chrome如何模拟其他客户端
113 1
Chrome——谷歌浏览器chrome如何模拟其他客户端
|
5月前
解除谷歌浏览器默认禁止音频自动播放
解除谷歌浏览器默认禁止音频自动播放
102 1
|
5月前
|
Web App开发
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
软件开发常见流程之移动端调试方法,利用Chrome(谷歌浏览器)的模拟手机调试,搭建本地Web服务器,手机和服务器在一个局域网,通过手机访问服务器,使用服务器,利用ip实现域名访问
|
5月前
|
Web App开发 前端开发
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
canvas保存图片时,谷歌浏览器Chrome报错【解决方案】Not allowed to navigate top frame to data URL
159 0