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

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

它可能会给你一个想法，帮助解决你的需求。

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

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

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

A 也会起作用。pattern\d*

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

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

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

简短的回答：

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 中，这些元素的 -moz-appearance 属性的（用户代理）默认值为 。将其更改为该值可有效地删除微调器。number-inputtextfield

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-appearancenone::-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" />

值得指出的是，它用于删除旧版本 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;
}

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

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

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

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

<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说的那样。

当您不想要微调器时，也许将带有 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”。 由于选择器错误，规则集被忽略。

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

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

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

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

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

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

我需要这个来工作

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

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

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

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

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

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

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

这就像你的css代码一样：

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

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

标准一致性问题

根据 type=number 的 HTML 规范：

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

（强调是我的）

可用性问题

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

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

替代解决方案

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

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

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

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

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

源