火狐谷歌浏览器去掉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的新特性 对他支持还不是太友好的!!!!
火狐谷歌浏览器去掉input type=number时控件的方法的更多相关文章
- input type="number"时,maxlength不起作用怎么解决
最近小颖在做公司的angular项目时,发现当input type="number"时,maxlength不起作用,百度了下解决方式,顺便记录下,以便后期查看嘻嘻 <inpu ...
- 去掉 input type="number" 右边图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 去掉input[type="number"]的默认样式
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !importa ...
- 去掉 input type="number" 在浏览器中遗留的图标样式
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ /* chrome */ -webkit-appeara ...
- input type='number'时,maxlength属性无效
<input type="number" oninput="if(value.length>11)value=value.slice(0,11)" ...
- 如何移除 input type="number" 时浏览器自带的上下箭头?
Chrome 下 input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: no ...
- HTML5中的input type为file控件限制上传文件类型及扩展
简单介绍 input file控件限制上传文件类型如下:1.文件类型中间用,分开:2.html和htm这样的要写成两个: 3实例: <input type="file" na ...
- jquery对所有<input type="text"的控件赋值
function resetData() { $("input[type=text]").each( function() { $(this).attr ...
- input type="number" 时 maxlength不起作用
给input标签添加 oninput=“if(value.length>11) value=value.slice(0,11)”
- CSS input type="number"出现上下箭头时解决方案
input type="number"时录入内容不可控制,解决方案是在css中添加//火狐input[type=number] { -moz-appearance:tex ...
随机推荐
- Vue3--使用脚手架创建一个vue应用,实现todolist
一.安装脚手架,运行项目 1.1 安装,运行 首先安装 16.0 或更高版本的 Node.js 然后在cmd安装并执行 create-vue 它是 Vue 官方的项目脚手架工具 npm init vu ...
- 【JAVA基础】JAVA基础知识整理
https://www.weixueyuan.net/java/rumen_1/ JAVA的三大版本 JDK.JRE.JVM JAVA安装与卸载 JDK结构 HelloWorld运行 编译型与解释型 ...
- C# .NET Socket SocketHelper 高性能 5000客户端 异步接收数据
网上有很多Socket框架,但是我想,C#既然有Socket类,难道不是给人用的吗? 写了一个SocketServerHelper和SocketClientHelper,分别只有5.6百行代码,比不上 ...
- Educational Codeforces Round 100 (Rated for Div. 2) 简单记录
最近在写Web大作业和期末复习,可能还会有一段时间不会更新blog了 1463A. Dungeon 题意:有3个血量为a,b,c的敌人,现在你每7发子弹能进行一次范围AOE攻击(即一次能集中三人),每 ...
- 深入浅出开源监控系统Prometheus(上)
本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/4NC4spF6cEvXuIBKVbIU7A作者:ZhangShuo Prometheus是继 ...
- [完整]流程解决Vue3项目搭建步骤
Vue3项目完整搭建步骤 一. 使用vite创建vue3项目 npm init vue@latest 或者npm create vite@latest进行初始化项目并创建项目名称code,进入code ...
- Java中数组、集合、链表、队列的数据结构和优缺点和他们之间的区别
数组:.长度固定.可以存储基本类型,也可以存储引用类型.存储元素类型一致数组可以在内存中连续存储多个元素的构造,在内存中的分配也是连续的数组中的元素通过数组的下标进行访问的,下标从0开始的优点 :按照 ...
- 【驱动】串口驱动分析(三)-serial driver
简介 前两节我们介绍串口驱动的框架和tty core部分.这节我们介绍和硬件紧密相关的串口驱动部分. UART驱动部分依赖于硬件平台,而TTY驱动和具体的平台无关.虽然UART部分依赖于平台,但是不管 ...
- 开发人员常用Docker指令
什么是 Docker? Docker 是一个开源的容器化平台,用于构建.打包和运行应用程序.它允许开发者将应用程序及其依赖项打包成一个独立的可移植容器,可以在任何环境中运行,无论是开发环境.测试环境还 ...
- docker 原理之 mount namespace(下)
1. mount namespace mount namespace 通过隔离文件系统挂载点对隔离文件系统提供支持.使用 unshare 构造 mount namespace 如下: root@chu ...