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

Question

有没有一种在各种浏览器中隐藏某些浏览器（如Chrome）为HTML数字输入渲染的新旋转框的一致方法？我正在寻找一种CSS或JavaScript方法来防止上下箭头的出现。

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

- Alan

---

你能否发布一下你正在使用的代码示例？如果能提供一张截图，那就更好了，这样我们就知道你在看什么。我正在Chrome中查看<input type="number" min="4" max="8" />，并且看到一个带有上下箭头的典型输入框。 - calvinf

你正在看到我所看到的。我试图保持type=number标记以确保移动浏览器弹出适当的键盘，并防止在计算机浏览器中出现向上和向下箭头。 - Alan

如果您正在使用数字输入，请确保使用与现代iOS、Android和桌面浏览器兼容的内容：<input type="number" pattern="[0-9]*" inputmode="numeric">。更多信息请参见：https://dev59.com/XW025IYBdhLWcg3wKSiP#31619311。 - Aaron Gray

我建议的做法是编写类似于 <input type="text" placeholder="number (digits only)" pattern="[0-9]+" class="validate number-validation" ... > 的标记，并使用 jQuery Validati 或类似工具来处理验证。我尚未测试过这种方法，这也是为什么这是一条评论而不是答案的原因。 - Agi Hammerthief

你可能误用了输入类型，HTML规范解释说它“不适用于仅由数字组成但严格来说不是数字的输入”。https://html.spec.whatwg.org/multipage/input.html#when-number-is-not-appropriate。还有其他属性可以控制触摸屏键盘，例如`inputmode`。 - Andy

Answer 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属性，寻找伪元素。这张图片展示了type="number"的输入元素的结果：

您可以随时使用检查器（webkit，可能是Firefox的Firebug）查找您感兴趣的元素的匹配CSS属性，寻找伪元素。此图显示了type =“ number”的输入元素的结果：

- antonj

---

看起来 Chrome 不再有问题，因此您可以仅在选择器中使用 display: none;。 - philfreo

很遗憾，这种方法不支持跨浏览器，如果你必须隐藏箭头，我建议不要使用 type=number。例如，在 Opera 浏览器中仍会显示箭头，在 Firefox、IE 等浏览器实现该输入类型后也将开始显示。 - mgol

只需使用<input inputmode="numeric" ... />即可。它现在得到了广泛的支持（https://caniuse.com/?search=inputmode）。 - Shivam Jha

我不会称之为“广泛支持”…… - RoboticRenaissance

@Johansrk 因为字母“e”可以是有效数字的一部分，例如1e3 === 1000。 - Eugene Karataev

Answer 2

Firefox 29现在支持number元素，因此这是一个隐藏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">

- swehren

Answer 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中，这些元素上(user agent)默认的-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属性在伪类::-webkit-outer-spin-button/::-webkit-inner-spin-button上的值改为none（默认为-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" />

值得注意的是，在旧版本的Chrome中，margin: 0用于去除边距。

目前，在编写本文时，'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

---

我更喜欢这个答案，因为它包含了相关的Firefox信息。在开发时需要考虑它。那些忽略其他浏览器引擎的仅适用于WebKit的答案还有很多需要改进的地方。 - RozzA

跟随“当前”和“撰写时”的所有编辑确实有些困难。也许可以修改为引用浏览器版本或添加实际日期。 - undefined

Answer 4

根据苹果移动Safari用户体验编码指南，您可以使用以下代码在iPhone浏览器中显示数字键盘： Apple’s user experience coding guide for mobile Safari。

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

使用 \d* 这个正则表达式模式也可以生效。

- team_steve

---

目前在Android中，所有浏览器上都没有任何效果。在Android 4.2上的Browser 4.2.2、Chrome 28和Firefox 23上，在此测试页面进行了测试。这些浏览器只会显示具有此标记的标准文本键盘。 - Rory O'Kane

以上评论已经过时，根据caniuse的数据，大多数流行的Android浏览器现在都支持它。此外，即使它现在还没有任何作用，它也符合标准，应该被添加，因为浏览器不断发展。 - Andy

你将失去由最小值和最大值提供的数字验证。 - Dan Marshall

Answer 5

我发现了一个超级简单的解决方案，使用

<input type="text" inputmode="numeric" />

这在大多数浏览器中都受支持：

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

• https://caniuse.com/input-inputmode

- youjin

---

这篇文章解释了英国政府为什么从type="number"转换到了另一种解决方案。 - Luke

如果你有物理键盘，仍然可以输入任何字符。 - vsync

@vsync OP和youjin从未提到这是不可能的。还有很多其他帖子处理这个问题-例如https://dev59.com/eHNA5IYBdhLWcg3wWseK - Peter VARGA

Answer 6

尝试使用 input type="tel" 代替。它会弹出一个数字键盘，不会显示旋转框。它不需要任何 JavaScript、CSS、插件或其他东西。

- MERT DOĞAN

---

这个解决方案目前在任何浏览器中都没有像“type=number”一样进行任何验证。 - Pepijn

电话键盘虽然比文本键盘好得多，但不如数字键盘好，因为电话键盘有一些无关的字母和符号，而这些字母和符号在数字键盘上被省略了。在Android 4.2上使用此页面进行测试。 - Rory O'Kane

电话键盘上没有句点“。”。 :-< - gion_13

这不是一个解决方案，按照HTML5标准来看是很愚蠢的。 input[tel]是用于电话号码的，input[number]是用于一般数字，包括浮点数。所以这根本不是一个解决方案。 - Vasil Popov

Answer 7

如果您试图隐藏浏览器添加的控件，则应该提示您错误使用了该输入类型。

标准符合性问题

来自HTML规范关于type=number：

type = number状态不适用于仅由数字组成但严格来说不是数字的输入。例如，信用卡号码或美国邮政编码将不适用。

（强调是我的）

可用性问题

<input type=number>在GOV.UK团队执行的一项可用性研究中被发现存在问题。该团队维护着世界上最著名的设计系统之一，并得出结论，这种输入类型：

• 在使用Dragon Naturally Speaking时无法被指定或选择
• 在NVDA的元素列表中没有标签
• 在NVDA的对象导航中显示为旋转按钮，内部有一个编辑字段和两个未标记的按钮- 这些按钮减少/增加值
• 在使用nvda+tab时报告为未标记的编辑字段

替代解决方案

相反，他们建议使用<input type="text" inputmode="numeric" pattern="[0-9]*">，这归结为@team_steve和@youjin的综合答案。这不仅隐藏了旋转框，还提高了元素的整体可用性。

不言而喻，需要进行其他验证，并提供有用的错误文本。

<label>Postal Code
<input type="text" inputmode="numeric" pattern="[0-9]*" size="5">
</label>

- Pepijn Gieles

---

仍然可以输入非数字字符 - 这是不希望出现的。可用性并不总是最重要的，因为只允许输入数字的限制效果是一个巨大的优点。 - vsync

您可以输入非数字字符，但不能提交表单。我认为这是一个优点，因为这样您可以检测错误并给出适当的验证消息。如果有人误输入，但只能输入数字，则根据规则，值可能是正确的，但从用户的角度来看却不是。例如，如果有人输入 1K，他们的意思是 1000。但是，如果无法输入 K，则无法检测到此错误。输入将是 1，这不是所想要的。 - Pepijn Gieles

我不理解你的论点，@vsync。在没有<form>元素的这种Web应用程序中，验证仍然需要实现。并且适当的错误消息比干扰用户输入要更加用户友好。你在链接中提供了证据。 - Andy

@Andy - 我已经删除了评论。我认为我评论了错误的答案，因为它不合适，所以我干脆把它全部删除了。 - vsync

输入正确地禁止非数字字符，因为提供的模式。@vsync 是什么意思，它允许什么，也许浏览器对pattern属性的支持现在更好了？ - undefined

很遗憾，您不能使用像min和max这样的数字特定属性。 - undefined

Answer 8

只需添加此 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

Answer 9

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

来源

- francis

Answer 10

我曾遇到过一个与input[type="datetime-local"]类似的问题，而我找到了解决这类问题的方法。

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

然后，您就可以看到所有受shadow DOM影响的DOM元素，例如，对于<input type="number">，完整的带有shadow 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所说的那样。

- Xiao Hanyu