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

I needed this to work

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

The extra line of appearance: none was key to me.

不是您要求的，但是我这样做是因为带有Spinboxes的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="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所说的那样。

Try using input type="tel" instead. It pops up a keyboard with numbers, and it doesn’t show spin boxes. It requires no JavaScript or CSS or plugins or anything else.