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 object-fit属性
Jul 27 HTML / CSS
css3实现针线缝合效果(图解步骤)
Feb 04 HTML / CSS
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5+css3之制作header实例与更新
Dec 21 HTML / CSS
从一次项目重构说起CSS3自定义变量在项目的使用方法
Mar 01 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
websocket+sockjs+stompjs详解及实例代码
Nov 30 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 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
PHP 截取字符串函数整理(支持gb2312和utf-8)
2010/02/16 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
javascript scrollTop正解使用方法
2013/11/14 Javascript
JavaScript常用脚本汇总(一)
2015/03/04 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
js实现图片淡入淡出切换简易效果
2016/08/22 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
原生js获取left值和top值的三种方法
2017/08/02 Javascript
Bootstrap与Angularjs的模态框实例代码
2017/08/03 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
webpack4简单入门实例
2018/09/06 Javascript
react-router4按需加载(踩坑填坑)
2019/01/06 Javascript
详解小程序退出页面时清除定时器
2019/04/28 Javascript
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
Sandro Paris美国官网:典雅别致的法国时尚服饰品牌
2017/12/26 全球购物
学生个人的自我评价分享
2013/11/05 职场文书
写好自荐信的几个要点
2013/12/26 职场文书
自动化专业职业生涯规划书范文
2014/01/16 职场文书
学生感冒英文请假条
2014/02/04 职场文书
竞选班委演讲稿
2014/04/28 职场文书
2014向国旗敬礼网上签名活动总结
2014/09/27 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
SQLServer2019 数据库的基本使用之图形化界面操作的实现
2021/04/08 SQL Server
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
详解Flutter和Dart取消Future的三种方法
2022/04/07 Java/Android
canvas 中如何实现物体的框选
2022/08/05 Javascript