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

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

输入::-webkit-outer-spin-button, input::-webkit-inner-spin-button { /* display: none; <- 悬停时 Chrome 崩溃 */ -webkit-appearance: none;边距：0； /* <-- 显然有些边距仍然存在，即使它被隐藏了 */ } input[type=number] { -moz-appearance:textfield; /* Firefox */ }

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

https://i.stack.imgur.com/QATjk.png

---

Firefox 29 当前增加了对数字元素的支持，所以这里有一个在基于 webkit 和 moz 的浏览器中隐藏微调器的片段：

输入[type='number'] { -moz-appearance:textfield; } 输入::-webkit-outer-spin-button, 输入::-webkit-inner-spin-button { -webkit-appearance: none; }

---

简短的回答：

输入[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none;边距：0； } input[type="number"] { -moz-appearance: textfield; }

更长的答案：

要添加到现有答案...

火狐：

在当前版本的 Firefox 中，这些元素上 -moz-appearance property 的（用户代理）默认值为 number-input。将其更改为值 textfield 会有效地删除微调器。

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

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

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

铬合金：

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

输入[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none;边距：0； }

值得指出的是，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;
}

---

根据 Apple’s user experience coding guide for mobile Safari，您可以使用以下方法在 iPhone 浏览器中显示数字键盘：

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

\d* 中的 pattern 也可以使用。

---

我找到了一个超级简单的解决方案

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

大多数浏览器都支持此功能：

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

https://caniuse.com/input-inputmode

---

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

---

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

---

如果您试图隐藏浏览器添加的控件，则应该暗示您在滥用该输入类型。

标准一致性问题

从 HTML spec on type=number：

type=number 状态不适用于恰好只包含数字但严格来说不是数字的输入。例如，它不适用于信用卡号或美国邮政编码。

（重点是我的）

可用性问题

在 GOV.UK 团队执行 a usability study 期间，发现 <input type=number> 存在问题。该团队维护着世界上最著名的设计系统之一，并得出以下结论：这种输入类型：

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

替代解决方案

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

不用说需要进行额外的验证，以及有用的错误文本。

邮政编码

---

我遇到了与此问题类似的 input[type="datetime-local"] 问题。

我已经找到了克服这类问题的方法。

首先，您必须通过“DevTools -> Settings -> General -> Elements -> Show user agent shadow DOM”打开 chrome 的 shadow-root 功能

然后你可以看到所有shadowed DOM elements，例如，对于<input type="number">，带有shadowed DOM的完整元素是：

https://i.stack.imgur.com/wIu6b.png

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

---

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

Source

---

不是您要求的，但我这样做是因为 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";
}

它可能会给你一个想法来帮助你满足你的需要。

---

这是更好的答案，我想建议鼠标悬停和没有鼠标悬停

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

---

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

---

为了在 Safari 中进行这项工作，我发现将 !important 添加到 webkit 调整会强制隐藏旋转按钮。

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 制定解决方案。

---

当您不想要微调器时，也许可以将使用 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';

它对我的目的很有效

---

在 Firefox for Ubuntu 上，只需使用

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

为我做了伎俩。

添加

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

会引导我

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

每次我尝试。内部旋转按钮也是如此。

---

我需要这个来工作

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

---

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

---

对我来说，chrome 上除了 display: none 之外什么都没有。

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

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

感谢@philfreo 在评论中指出这一点。

---

这就像你的 CSS 代码：

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

---