火狐谷歌浏览器去掉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的新特性  对他支持还不是太友好的!!!!

总结

以上是编程之家为你收集整理的火狐谷歌浏览器去掉input type=number时控件的方法全部内容,希望文章能够帮你解决火狐谷歌浏览器去掉input type=number时控件的方法所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的HTML5相关文章

html 默认:&lt;input type=&quot;number&quot; /&gt;&lt;/br&gt; 处理:&lt;input type=&quot;number&quot; clas
/* 运用在父级元素上 align-content: 它通产与子元素的div{margin:10px 一起联合使用 }*/ ps==&gt;用在子项出现换行的情况下,并是多行的情况下哦。运用在子项在侧
解决办法一 .main{ display: flex; justify-content: space-around; flex-wrap: wrap; } .son{ width:100px } //
FormData对象介绍FormData字母意思是表单数据,H5新增的一个内置对象。可以获取任何类型的表单数据,如text radio checkbox file textarea 常用语发送ajax
功能需求: 在下拉框中选择你所需要缩放的比例, 选择好了之后,图片会按照你选择的比例进行缩放 1==》如何获取select中option选中的值 在select添加事件change 和双向绑定v-mo
我发现在vue脚手架中不同的版本,对视频标签的处理是不同的哈。 在vue脚手架2.0中。离开视频video标签。所在的页面。 视频标签会自动关闭。 但是在vue3.0的脚手架中却不会自动关闭
&lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot
一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注