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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
使用CSS3 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 HTML / CSS
浅谈h5自定义audio(问题及解决)
Aug 19 HTML / CSS
HTML5添加禁止缩放功能
Nov 03 HTML / CSS
HTML5表单验证特性(知识点小结)
Mar 10 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
HTML基础详解(下)
Oct 16 HTML / CSS
分享几个实用的CSS代码块
Jun 10 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
phpphp图片采集后按原路径保存图片示例
2014/02/18 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
CI框架常用函数封装实例
2016/11/21 PHP
php生成微信红包数组的方法
2019/09/05 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
FireFox下XML对象转化成字符串的解决方法
2011/12/09 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
javascript中的return和闭包函数浅析
2014/06/06 Javascript
jquery彩色投票进度条简单实例演示
2020/07/23 Javascript
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
2015/12/13 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
python Django连接MySQL数据库做增删改查
2013/11/07 Python
Python合并字典键值并去除重复元素的实例
2016/12/18 Python
python实现分页效果
2017/10/25 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
python 实现屏幕录制示例
2019/12/23 Python
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
营业员个人总结的自我评价
2013/10/25 职场文书
销售员试用期自我评价
2014/09/15 职场文书
公安机关党的群众路线教育实践活动剖析材料
2014/10/10 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
追悼会悼词大全
2015/06/23 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
Python3 多线程(连接池)操作MySQL插入数据
2021/06/09 Python