我需要这个成功

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

外表的额外线条:对我来说都不是关键。

这就像你的css代码:

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

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

对我来说，在chrome上什么都没有工作，但显示:没有。

/* 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在评论中指出这一点。

我在输入[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说的那样。

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

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