跨浏览器是否存在一种一致的方式来隐藏某些浏览器（例如Chrome）为数字类型的HTML输入呈现的新旋转框？我正在寻找一种CSS或JavaScript方法来防止出现向上/向下箭头。

<input id="test" type="number">


评论

您可以张贴您正在使用的代码的示例吗？屏幕快照也很好，所以我们知道您在看什么。我正在查看Chrome中的，并看到一个典型的输入字段，侧面带有向上和向下箭头。
您所看到的正是我所看到的。我正在尝试保留type = number标记，以确保移动浏览器显示适当的键盘，并防止向上箭头和向下箭头出现在计算机浏览器中。
如果您使用数字输入，请确保使用在现代iOS，Android和桌面浏览器上都能正常使用的功能：。更多信息：stackoverflow.com/a/31619311/806956
我建议做的是沿着和使用jQuery Validati或类似方法来进行验证。我没有测试过这种方法，这就是为什么这是评论而不是答案。

#1 楼

此CSS有效地隐藏了Webkit浏览器的旋转按钮（已在Chrome 7.0.517.44和Safari版本5.0.2（6533.18.5）中进行了测试）：




 input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

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

 <input type="number" step="0.01" />





您始终可以使用检查器（Webkit，可能是Firefox的Firebug）来查找与您感兴趣的元素匹配的CSS属性，并查找Pseudo元素。此图显示了输入元素type =“ number”的结果：



评论

Chrome似乎不再有问题，因此您可以使用display：none;作为选择器中唯一的东西

– philfreo
2012年9月11日18:19


不幸的是，这不是跨浏览器，因此如果您必须隐藏这些箭头，建议不要使用type = number。例如。目前，它们仍将在Opera中显示，并且在实现此输入类型时将开始在Firefox，IE等中显示。

– mgol
2013年2月5日14:44
我需要在上使用max =和min =属性，因此替代解决方案（例如type =“ text”）不是有效的HTML5。人们还提到Opera，包括这些微调器。 Opera是否有类似于Safari / Chrome的解决方案？

– unode
2013年6月5日18:24


作为记录，Chrome还为X按钮输入了::-webkit-clear-button

– aldo.roman.nurena
13年10月4日在18:33
截至2019年，这在Firefox中对我不起作用。这个解决方案为我工作：stackoverflow.com/questions/45396280/…

–lwitzel
19 Mar 27 '19 at 17:07

#2 楼

Firefox 29当前增加了对数字元素的支持，因此以下是在基于Webkit和Moz的浏览器中隐藏微调框的代码段：




 input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
} 

 <input id="test" type="number">




评论

再加上安东尼的答案中的'margin：0'是我使用的

–阿斯范·卡兹
18年1月24日在16:56


我没有保证金就使用它，看起来还可以（2020年5月）。

– croraf
5月8日15:58
tbh，禁用箭头键只是为了使其返回文本字段有什么意义？

–addy_sk
7月16日13:07
type =“ number”还会添加验证，并且在移动设备上它将拉起数字键盘，而不是普通键盘。

–瑞典人
7月17日15:07

#3 楼

简短答案：



 input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
} 

 <input type="number" />




更长的答案：
要添加到现有答案中......
Firefox：
在当前版本的Firefox中，（用户代理）-moz-appearance属性的默认值在这些元素上是number-input。将其更改为textfield值可有效移除微调器。
input[type="number"] {
    -moz-appearance: textfield;
}

在某些情况下，您可能希望微调器最初是隐藏的，然后出现在悬停/焦点上。 （这是Chrome当前的默认行为）。如果是这样，则可以使用以下内容：



 input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
} 

 <input type="number"/>





Chrome：
在当前版本的Chrome中，这些元素上的-webkit-appearance属性的（用户代理）默认值已经是textfield。为了删除微调器，需要将-webkit-appearance / none伪类上的::-webkit-outer-spin-button属性值更改为::-webkit-inner-spin-button（默认为-webkit-appearance: inner-spin-button）。



 input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
} 

 <input type="number" />




值得指出的是，margin: 0用于消除旧版Chrome中的页边空白。
当前，在撰写本文时，这是'inner-spin'的默认用户代理样式按钮的伪类：
input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: inline-block;
    cursor: default;
    flex: 0 0 auto;
    align-self: stretch;
    -webkit-user-select: none;
    opacity: 0;
    pointer-events: none;
    -webkit-user-modify: read-only;
}


评论

我更喜欢这个答案，因为它包含相关的firefox信息，在开发某些东西时，需要考虑这些信息。忽略其他浏览器引擎的仅适用于webkit的答案有很多不足之处

– RozzA
16年8月4日在21:13
在firefox解决方案中添加！important。就像这样===> input [type =“ number”] {-moz-appearance：textfield！important; }

– Sajad Saderi
19-09-29在5:37


奇怪的是，仍然可以键入字母“ E”。

–addy_sk
7月16日13:08
@addy_sk-这是由于科学计数法（即1.314E + 10 => 13140000000）。

–乔什·克罗泽（Josh Crozier）
7月16日14:01

#4 楼

根据Apple针对移动Safari的用户体验编码指南，您可以使用以下命令在iPhone浏览器中显示数字键盘：



 <input type="text" pattern="[0-9]*" />


pattern的\d*也将起作用。

评论

尽管有上述情况，经过检查的解决方案对于给定的问题仍然非常有效，我决定在此处切换到该解决方案。原因之一是，例如Opera浏览器还会显示箭头，您也应该避免使用。其次，我在Chrome 17中发现了更大的问题。一方面，“ maxlen”属性似乎不再起作用；另一方面，“ maxlen”属性似乎不再起作用。您可以在其中输入任意多个字符。另一方面，将超过一定长度的数字简单地四舍五入。对我而言，使用此解决方案“仅在iOS设备上打开数字键盘”似乎更安全。

– Jan
2012-03-20 10:55
我也使用了这种解决方案，因为我有一些JS，当我键入时，这些JS在输入字段中格式化了数字，但不适用于数字字段。因此，这一功能就像一种魅力。

– Tokimon
2012年6月7日在9:14
目前，在所有浏览器中，这对Android均不起作用。已在Android 4.2上的浏览器4.2.2，Chrome 28和Firefox 23中的此测试页上进行了测试。这些浏览器仅显示带有此标记的标准文本键盘。

–罗里·奥凯恩（Rory O'Kane）
13年8月15日在16:21
这是适用于Android和iOS的不错的解决方案：stackoverflow.com/a/31619311/806956

–亚伦·格雷（Aaron Gray）
15年7月24日在20:36


@AaronGray回到第一个平方：该解决方案为桌面提供了微调器。

– StrangeWill
16年5月26日在14:23

#5 楼

尝试改用input type="tel"。它弹出带有数字的键盘，并且不显示旋转框。它不需要JavaScript或CSS或插件或其他任何内容。

评论

该解决方案目前不像type = number那样在任何浏览器中进行任何验证。

–佩皮恩
13年6月18日在10:23
电话键盘不如数字键盘好，尽管它远比文本键盘好。电话键盘上有不相关的字母和符号，数字键盘上省略了这些字母和符号。 （已在Android 4.2上对此页面进行过测试。）

–罗里·奥凯恩（Rory O'Kane）
13年8月15日在16:38


没有“。”在电话键盘中：-<

– gion_13
2013年9月3日12:59
@ RoryO'Kane数字键盘有一个很大的缺点，即它会拒绝任何非严格数字的输入。

– Jochem Kuijpers
2014年8月17日在22:04
这不是一个解决方案，按照HTML5标准，它是愚蠢的。 input [tel]用于电话号码，input [number]用于通用数字，包括浮点数。因此，这根本不是解决方案。

–瓦西尔·波波夫（Vasil Popov）
15年4月27日在12:32

#6 楼

仅添加此CSS即可删除编号为

/* For Firefox */

input[type='number'] {
    -moz-appearance:textfield;
}



/* Webkit browsers like Safari and Chrome */

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

的输入上的微调器

评论

根据caniuse输入[type = number] {-webkit-appearance}对于chrome应该足够了，但是当然您还需要修改伪元素。知道为什么吗？

–老男孩
19年7月20日在22:24

#7 楼

我发现使用
<input type="text" inputmode="numeric" />



超级简单的解决方案，大多数浏览器都支持：https://developer.mozilla.org/zh-CN/docs/Web/HTML / Global_attributes / inputmode

评论

虽然这将在手机上显示一个数字键盘，但它将允许Chrome桌面上的字母字符。在测试了最可接受的答案之后，Firefox默认情况下似乎允许在数字类型上使用字母-因此，无论如何您都需要处理它。该解决方案似乎是最直接的方法。

–卢克
9月5日12:12


technology.blog.gov.uk/2020/02/24/…解释了为什么英国政府从type =“ number”切换到此解决方案。

–卢克
9月5日22:42

#8 楼

我遇到了input[type="datetime-local"]这个问题，与这个问题类似。

，我找到了一种克服此类问题的方法。

首先，您必须通过“ DevTools->设置->常规->元素->显示用户代理阴影DOM”打开chrome的阴影根功能。

然后您可以看到所有阴影的DOM元素，例如<input type="number"> ，带有阴影DOM的完整元素是：




 <input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>







根据这些信息，您可以起草一些CSS来隐藏不需要的元素，就像@Josh所说的那样。

#9 楼

不是您要的，而是因为带有Spinboxes的WebKit中的焦点错误，所以我这样做：

评论

这并不是我所说的，但是由于目前缺乏HTML5的标准化，这是目前最好的解决方案。为移动设备和台式机提供不同的站点（无论如何实现）似乎是当前完成此任务的唯一方法。但是，我确实必须创建该元素的副本并更改“类型”值，然后再将其添加到DOM。由于IE一旦将元素添加到dom后就不允许修改输入的类型。

–艾伦
2010-10-28 18:39


#10 楼

这是我想建议使用鼠标悬停和不使用鼠标悬停的更好的答案

input[type='number'] {
  appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button,
input[type='number']:hover::-webkit-inner-spin-button, 
input[type='number']:hover::-webkit-outer-spin-button {
-webkit-appearance: none; 
 margin: 0; }


评论

margin：0完成什么工作？同样，旋转按钮伪元素似乎不是由新浏览器中的悬停触发的吗？

–老男孩
19年7月20日在22:42

#11 楼

为了使它在Safari中起作用，我发现在webkit调整中添加！important会强制隐藏旋转按钮。

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}


我仍然在为歌剧也是。

#12 楼

在适用于Ubuntu的Firefox上，只需使用

    input[type='number'] {
    -moz-appearance:textfield;
}


就可以帮我这个忙。

添加

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}


会带我去


未知的伪类或伪元素“ -webkit-outer-spin-button”。
由于选择器错误，规则集被忽略。


每次尝试。内部旋转按钮相同。

评论

-webkit- *用于Chrome，-moz- *用于mozilla firefox。这就是为什么它对您不起作用的原因。

–Gusstavv Gil
17年1月26日在6:46

#13 楼




 input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none; 

 <input id="test" type="number">




评论

这个答案已经给出了好几次了。如果新答案是重复的，它有助于在提供新答案之前先阅读现有答案。

– Dan Dascalescu
18年7月21日在3:06

#14 楼

在基于WebKit和基于Blink的浏览器以及所有种类的浏览器中，使用以下CSS：

/* Disable Number Arrow */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}


评论

在使用webkit的情况下，可以在哪些浏览器上使用？当用一个已有的十四个答案回答一个已有九年历史的问题时，重要的是要增加对您的答案的方式和原因的解释，并提及它所回答的问题的新方面。

–杰森·艾勒（Jason Aller）
3月30日15:22

#15 楼

当您不需要微调器时，可以将使用javascript输入的数字更改为文本输入； 

document.getElementById('myinput').type = 'text';


并停止用户输入文本； 

  document.getElementById('myinput').onkeydown = function(e) {
  if(!((e.keyCode > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 58) 
    || e.keyCode == 8
    || e.keyCode == 9)) {
          return false;
      }
  }


然后让javascript将其改回来，以防万一您需要微调器； 

document.getElementById('myinput').type = 'number';


对我来说效果很好
/>

#16 楼

我需要它来工作

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button
  -webkit-appearance: none
  appearance: none
  margin: 0

/* Firefox */
input[type=number]
  -moz-appearance: textfield


appearance: none的额外行是我的关键。

#17 楼

就像您的CSS代码：
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}