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学习之2D转换功能详解
Dec 23 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
基于css3 animate制作绚丽的动画效果
Nov 24 HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 HTML / CSS
css3实现文字扫光渐变动画效果的示例
Nov 07 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5打开手机扫码功能及优缺点
Nov 27 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 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&amp;MYSQL留言板源码
2020/07/19 PHP
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
magento后台无法登录解决办法的两种方法
2016/12/09 PHP
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
js的一些常用方法小结
2011/06/29 Javascript
动态改变div的z-index属性的简单实例
2013/08/08 Javascript
JS扩展方法实例分析
2015/04/15 Javascript
跟我学习javascript的循环
2015/11/18 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
快速入门Vue
2016/12/19 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
2019/08/16 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
js实现盒子滚动动画效果
2020/08/09 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python 实现链表实例代码
2017/04/07 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python系列 文件操作的代码
2019/10/06 Python
keras 多gpu并行运行案例
2020/06/10 Python
详解CSS3的box-shadow属性制作边框阴影效果的方法
2016/05/10 HTML / CSS
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
管理科学大学生求职信
2013/11/13 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
民生工作实施方案
2014/05/31 职场文书
建筑结构施工求职信
2014/07/11 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
户外活动总结
2015/02/04 职场文书
小学生安全教育主题班会
2015/08/12 职场文书