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

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

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

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

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

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="text" pattern="[0-9]*" />

尝试改用input type="tel" 。它弹出带有数字的键盘，并且不显示旋转框。它不需要 JavaScript 或 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;
}

我遇到了与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 所说的那样。

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