初次使用input的数字输入类型type="number"时会发现默认有个上下的箭头,如下图:

很明显这里不需要这个默认箭头,那么我们如何移出这个默认样式呢?

第一种方式,写css兼容代码 :

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{

-webkit-appearance: none !important;
    margin: 0; 
}                                                                                 // chrome

input[type="number"]{-moz-appearance:textfield;}   // Firefox

第二种方案,很简单,就是将type="number"改为type="tel"，同样是数字键盘，但是没有箭头。

这里用第一种方法移出了上下箭头,感觉好看多了,(*^__^*)

如何移除HTML5的type=""number""的input标签的上下箭头的更多相关文章

  1. type为number的input标签输入小数的方法

    纠结了一段时间都没找出方法,最后灵光一现想出这个方法,没想到测试下果然成功了! 看目前网上几乎很难找到相对应的解决方法,所以这里分享出来,如果有更佳方法欢迎提出. 方法如下: <input ty ...

  2. 【转】去掉HTML5中number类型input字段的小箭头

    第一种方案: 在chrome下: input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{    -webkit-appea ...

  3. type为number的<input>标签 type和size属性失效

    html5中input的type属性增的可取值新增几种,对于不支持这几种新增值的浏览器会统一解析为text类型. Firefox.ie9不支持

  4. type类型为number的input标签可以输入字母e

    主要原因是:e在数学上代表的是无理数,是一个无限不循环的小数,其值约为2.7182818284,所以在输入e的时候,输入框会把e当成一个数字看待. 可以采用下面的方式来避免这个BUG,在input标签 ...

  5. 点击DIV触发其他元素的点击事件(案例：点击type="radio" 的input 标签外层DIV，触发内部单选点击选中事件)

    方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...

  6. JSP的数据从数据库中获取导入type=date的input标签中

    jsp 页面最开始加上 <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %> & ...

  7. 移除input在type="number"时的上下箭头

    网页在有些情况下,会需要input的输入的为单纯数字的文本框,此时type=number,但使用type=number时,输入框后面会有一个上下箭头,那么如何去掉上下箭头呢? <input ty ...

  8. 动手写个数字输入框1：input[type=number]的遗憾

    前言  最近在用Polymer封装纯数字的输入框,开发过程中发现不少坑,也有很多值得研究的地方.本系列打算分4篇来叙述这段可歌可泣的踩坑经历: <动手写个数字输入框1:input[type=nu ...

  9. 去除input[type=number]最右边的spinners(默认加减符号)

    // 去掉input[type=number]默认的加减号 input[type='number'] { -moz-appearance:textfield; } input[type=number] ...

随机推荐

  1. 运行容器的最佳实践 - 每天5分钟玩转 Docker 容器技术（24）

    按用途容器大致可分为两类:服务类容器和工具类的容器. 1. 服务类容器以 daemon 的形式运行,对外提供服务.比如 web server,数据库等.通过 -d 以后台方式启动这类容器是非常合适的. ...

  2. 克隆 CentOS 后系统启动问题解析

    问题背景: 虚拟机:VMware Workstation. 操作系统:CentOS,是Linux发行版之一. 问题: 原因:虚拟机的服务没有开启(虚拟机开启一般比较占内存,所有多数人都设置成手动开启) ...

  3. 关于通用的C#后台获取前台页面的标签的正则表达式

    Regex   reg = new Regex("<div[^>]*?class=\"类属性名称\"[^>]*>(.*?) </div> ...

  4. [USACO08JAN]手机网络Cell Phone Network

    [USACO08JAN]手机网络Cell Phone Network 题目描述 Farmer John has decided to give each of his cows a cell phon ...

  5. java数据类型转换那点事

    public class kkk { /** * 先看看eclipse对于数值型转换会有哪些报错,但是有一点必须明确,eclipse不报错的,不一定就是说这种思维逻辑是对的 * 可以直接将代码复制过去 ...

  6. PHP中小小的header函数

    不废话,直接说功能 1.重定向,语法: header("location:http://www.lemon-x.ga"); file_put_contents("./te ...

  7. 【Android Developers Training】 80. 管理网络使用

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

  8. 【原创】源码角度分析Android的消息机制系列（六）——Handler的工作原理

    ι 版权声明:本文为博主原创文章,未经博主允许不得转载. 先看Handler的定义: /** * A Handler allows you to send and process {@link Mes ...

  9. linq 批量修改更新

    批量修改:var values = Context.Request["values"].JsonDeserialize<Dictionary<string, objec ...

  10. centos生成公钥私钥 securecrt通过公钥访问服务器 winscp通过公钥访问服务器

    忙碌了一下午,一直到写博客现在.都在纠结阿里云服务器上配置公钥私钥,网上的说辞总是参差不齐,需要各个去综合,合理取舍.今天终于配置好了. 我就不说这种方式的重要性了,往往黑客都不需要你的登陆账户密码就 ...