我在输入[type="datetime-local"]时遇到过这个问题，它与这个问题类似。

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

首先，你必须打开chrome的阴影根功能“DevTools ->设置->通用->元素->显示用户代理阴影DOM”

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

< input type = "数量" > <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 > 输入> < /

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

不是你要求的，但我这样做是因为WebKit中的spinboxes的焦点bug:

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

它可能会给你一个想法来帮助你。

Firefox 29目前增加了对数字元素的支持，所以这里有一个代码片段，用于隐藏webkit和基于moz的浏览器中的旋转器:

输入(type =“数量”){ -moz-appearance:文本框; ｝ 输入::-webkit-outer-spin-button, 输入:-webkit-inner-spin-button { -webkit-appearance:没有; ｝ <input id="test" type="number">

这个CSS有效地隐藏了webkit浏览器的自旋按钮(已经在Chrome 7.0.517.44和Safari Version 5.0.2(6533.18.5)中进行了测试):

输入::-webkit-outer-spin-button, 输入:-webkit-inner-spin-button { /*显示:无;<-浏览器在悬停时崩溃*/ -webkit-appearance:没有; 保证金:0;/* <—显然一些边距仍然存在，尽管它被隐藏了*/ } 输入(type =数量){ -moz-appearance:文本框;/* Firefox */ ｝ <input type="number" step="0.01" />

你总是可以使用检查器(webkit，可能是Firefox的Firebug)为你感兴趣的元素寻找匹配的CSS属性，寻找伪元素。下图显示输入元素type="number"的结果:

为了在Safari中实现这一功能，我发现在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制定解决方案时遇到了麻烦。

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

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

大多数浏览器都支持:

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