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

Question

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

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

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" 的结果：

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

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 中，-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-outer-spin-button< 上的 -webkit-appearance 属性值更改为 none /code>/::-webkit-inner-spin-button 伪类（默认为 -webkit-appearance: inside-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;
}

Answer 4

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

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

\d* 的 pattern 将也工作。

Answer 5

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

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

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

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

• https://caniuse.com/input-inputmode< /a>

  
  

Answer 6

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

Answer 7

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

标准一致性问题

type=number 的 HTML 规范中的 ：

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

（重点是我的）

可用性问题

在 一项由 GOV.UK 团队进行的可用性研究。该团队维护着世界上最著名的设计系统之一，并得出结论，该输入类型：

• 使用 Dragon Naturally 时不能口述或选择
  说话
• 显示为在 NVDA 的元素列表中未标记
• 在 NVDA 的对象导航中显示为旋转按钮，其中有一个编辑字段和里面有两个按钮 - 这些按钮没有标签，
  但减少/增加值
• 使用 nvda+tab 时报告为未标记的编辑字段< /里>

替代解决方案

相反，他们建议使用 ，这可以归结为以下组合的答案@team_steve 和@youjin。这不仅隐藏了旋转框，还提高了元素的整体可用性。

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

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

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

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

来源

Answer 10

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

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

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

然后你就可以看到所有shadowed DOM元素 ，例如，对于 ，具有阴影 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所说。

Answer 11

为了在 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 的解决方案。

Answer 12

当您不需要旋转器时，可以将使用 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';

它很适合我的目的

Answer 13

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

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

Answer 14

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

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

Answer 15

在 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”。
由于选择器错误而忽略了规则集。

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

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

Answer 17

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

Answer 18

对于我来说，在 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 在评论中指出这一点。

Answer 19

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

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

Answer 20

这就像你的 CSS 代码：

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