初次使用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. python脚本 随机定位坐标

    import mathimport randomdef rad(dg):    return (dg * math.pi / 180)def deg(rd):    return (rd * 180 ...

  2. java GUI （课堂笔记）

    关于java GUI Swing组件: JFrame 窗口组件 JLabel 标签 JButton 按钮组件 JTextField 单行文本框 系统控件(JDK自带) 自定义控件(模仿系统控件): 继 ...

  3. .NET MVC页面生命周期及传统ASP.NET页面周期

    目前我主要使用.Net MVC框架进行网页创建,数据库是MSSQL Server.所以,我就用.NET MVC框架的web页面周期来说明页面的生命周期,但是我觉着其他MVC框架也是大同小异的. 本文主 ...

  4. 用户权限模块之spring security

    准备工作:数据库采用mysql(5.6及以上) CREATE TABLE `auth_system` ( `ID` int(11) NOT NULL AUTO_INCREMENT COMMENT 'I ...

  5. 利用angular给节点添加样式

    <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <met ...

  6. 匿名属性 anonymous property

    利用匿名属性可以用很简洁的语法来自动声明不可变(immutable)的元组(tuple)类型. 属性:在字段用来表示类型和对象的状态的前提下,希望状态不被随意的更改,字段一般应该设置为private, ...

  7. easyUI的简单了解

    首先简单的介绍一下jQuery EasyUI,它是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写 ...

  8. Python数据类型及其方法详解

    Python数据类型及其方法详解 我们在学习编程语言的时候,都会遇到数据类型,这种看着很基础也不显眼的东西,却是很重要,本文介绍了python的数据类型,并就每种数据类型的方法作出了详细的描述,可供知 ...

  9. css透明度的设置

    Css代码 .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: ...

  10. Qlik报表开发见解

    因为项目需要,最近去做了Qlik Sense报表开发,学习了Qlik报表的开发方法和一些基础的开发模式,以下是我对Qlik报表开发的一些见解,个人水平有限,欢迎大神指导. 1.Qlik Sense的函 ...