我可以隐藏HTML5数字输入的旋转框吗？

982

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

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

— 艾伦
source

2

您可以张贴您正在使用的代码示例吗？屏幕截图也很好，所以我们知道您在看什么。我<input type="number" min="4" max="8" />在Chrome浏览器中查看，并看到一个典型的输入字段，该字段的侧面带有向上和向下箭头。

— calvinf

77

您所看到的正是我所看到的。我正在尝试保留type = number标记，以确保移动浏览器调出合适的键盘，并防止向上和向下箭头出现在计算机浏览器中。

— 艾伦（Alan）2010年

3

如果您使用数字输入，请确保使用在现代iOS，Android和桌面浏览器上都能正常使用的功能：<input type="number" pattern="[0-9]*" inputmode="numeric">。更多信息：stackoverflow.com/a/31619311/806956

— 亚伦·格雷

1

我建议做的是按照jQuery Validati或类似方法编写标记，<input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > 并使用它来处理验证。我没有测试这种方法，这就是为什么这是评论而不是答案。

— Agi Hammerthief

1139

此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）

— 安东尼
source

23

Chrome似乎不再有问题，因此您可以将其 display: none;用作选择器中的唯一功能

— philfreo 2012年

9

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

— mgol 2013年

我需要在max=和min=属性上使用and 属性，<input>因此替代解决方案例如type="text"无效的HTML5。人们还提到Opera，包括这些微调器。Opera是否有类似于Safari / Chrome的解决方案？

— 于

2

记录，Chrome也有input::-webkit-clear-buttonX按钮

— aldo.roman.nurena

2

截至2019年，这对我在Firefox中不起作用。这个解决方案对我

— 有用

431

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">

展开摘要

— eh
source

加上antonj的回答中的'margin：0'是我使用的

— Asfand Qazi

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

— croraf

359

简短答案：

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中，这些元素上的（用户代理）-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-button'伪类上的默认用户代理样式：

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;
}

— 乔什·克罗泽（Josh Crozier）
source

14

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

— RozzA

在firefox解决方案中添加！important。就像这样===> input [type =“ number”] {-moz-appearance：textfield！important; }

— sajad saderi's

126

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

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

一pattern的\d*也可以工作。

— team_steve
source

5

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

— 1

我也采用了这种解决方案，因为我有一些JS可以在输入时格式化输入字段中的数字，而不适用于数字字段。因此，这一功能就像一种魅力。

— Tokimon 2012年

19

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

— 罗里·奥肯

3

这是适用于Android和iOS的不错的解决方案：stackoverflow.com/a/31619311/806956

— 亚伦·格雷

1

@AaronGray回到第一个方框：该解决方案具有桌面微调器。

— StrangeWill

39

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

— MERTDOĞAN
source

17

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

— Pepijn

5

电话键盘不如数字键盘好，尽管它远比文本键盘好。电话键盘上有不相关的字母和符号，数字键盘上省略了这些字母和符号。（已在Android 4.2上对此页面进行了测试。）

— 罗里·奥凯恩

16

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

— gion_13'9

1

@ RoryO'Kane数字键盘有一个很大的缺点，即它会拒绝任何非严格数字的输入。

— Jochem Kuijpers 2014年

4

这不是一个解决方案，按照HTML5标准，它是愚蠢的。input [tel]用于电话号码，input [number]用于通用数字，包括浮点数。因此，这根本不是解决方案。

— Vasil Popov

17

仅添加此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;
}

— Sanjib Debnath
source

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

— oldboy

8

我使用遇到了此问题，input[type="datetime-local"]类似于此问题。

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

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

然后，您可以看到所有阴影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所说的那样。

— 肖汉宇
source

3

不是您要求的，但是我这样做是因为带有Spinboxes的WebKit中存在焦点错误：

// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
    var els = document.querySelectorAll("input[type=number]");
    for (var el in els)
        el.type = "text";
}

它可能会给您一个想法，以帮助您解决所需的问题。

— 高拉夫
source

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

— 艾伦（Alan）2010年

3

这是一个更好的答案，我想建议将鼠标悬停在上面并将鼠标悬停在上面

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; }

— 交换-IOS-Android
source

有什么margin: 0成就？此外，spin-button伪元素似乎不是由hover较新的浏览器触发的吗？

— oldboy

2

为了使它在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 */
}

我仍然很难为Opera制定解决方案。

— 幸运草
source

2

在适用于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”。由于选择器错误，规则集被忽略。

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

— sonny_boy
source

1

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

— Gusstavv Gil

2

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

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

展开摘要

— 沙尔玛王子
source

6

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

— Dan Dascalescu '18

1

当您不需要微调框时，可以将使用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';

对于我的目的来说效果很好

— 用户名
source

1

在基于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; 
}

— 萨比尔·霍森·乔杜里
source

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

— Jason Aller

0

我需要这个来工作

/* 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对我来说很关键。

— 维克
source