HTML5去掉输入框type为number时的上下箭头的实现方法


Posted in HTML / CSS onJanuary 03, 2020

html5中,input type="number"时 右边会有一个上下小箭头,介绍去掉这个箭头的方法,完成浏览器的兼容,页面效果的统一

HTML5去掉输入框type为number时的上下箭头的实现方法

一。公共样式

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>去掉输入框type为number时的上下箭头</title>
  <style>
   /*谷歌*/
   input::-webkit-outer-spin-button,
   input::-webkit-inner-spin-button {
    -webkit-appearance: none;
   }
   /*火狐*/
   input[type="number"] {
    -moz-appearance: textfield;
   }
  </style>
 </head>
 <body>
  <input type="number" ...>
 </body>
</html>

二。专用样式

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>去掉输入框type为number时的上下箭头</title>
  <style>
   /*在谷歌下移除input[number]的上下箭头*/
   .inputNumber input[type='number']::-webkit-outer-spin-button,
   .inputNumber input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
   }
   /*在firefox下移除input[number]的上下箭头*/
   .inputNumber input[type="number"] {
    -moz-appearance: textfield;
   }
  </style>
 </head>
 <body>
  <input type="number" class="inputNumber" placeholder="请输入电话号码"> 1
 </body>
</html>

总结

以上所述是小编给大家介绍的HTML5去掉输入框type为number时的上下箭头的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 HTML / CSS
HTML5中canvas中的beginPath()和closePath()的重要性
Aug 24 HTML / CSS
html5拖曳操作 HTML5实现网页元素的拖放操作
Jan 02 HTML / CSS
html5适合移动应用开发的12大特性
Mar 19 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 #HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 #HTML / CSS
Html5获取高德地图定位天气的方法
Dec 26 #HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 #HTML / CSS
HTML5 Canvas 实现K线图的示例代码
Dec 23 #HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 #HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 #HTML / CSS
You might like
第十三节--对象串行化
2006/11/16 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
JavaScript静态的动态
2006/09/18 Javascript
Javascript技术技巧大全(五)
2007/01/22 Javascript
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
根据鼠标的位置动态的控制层的位置
2009/11/24 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
浅谈Angular单元测试总结
2019/03/22 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
原生JavaScript实现购物车
2021/01/10 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python中的CURL PycURL使用例子
2014/06/01 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python3下错误AttributeError: ‘dict’ object has no attribute’iteritems‘的分析与解决
2017/07/06 Python
Python爬虫信息输入及页面的切换方法
2018/05/11 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
写给学生的新学期寄语
2014/01/18 职场文书
幼儿园八一建军节活动方案
2014/08/27 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
小学生读书笔记
2015/07/01 职场文书
酒店开业主持词
2015/07/02 职场文书
新闻稿件写作范文
2015/07/18 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL
为什么MySQL不建议使用SELECT *
2022/04/03 MySQL