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

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

源

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

简短的回答:

输入(type = "数量"]::-webkit-outer-spin-button, 输入(type = "数量"]::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金:0; ｝ 输入(type = "数量"]{ -moz-appearance:文本框; ｝ <input type="number" />

再答:

为了补充现有的答案……

Firefox:

在当前版本的Firefox中，(用户代理)这些元素上的-moz-appearance属性的默认值是number-input。将其更改为value文本字段有效地删除了旋转器。

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

在某些情况下，你可能希望旋转器一开始是隐藏的，然后出现在悬停/聚焦上。(这是目前Chrome的默认行为)。如果是，你可以使用以下方法:

输入(type = "数量"]{ -moz-appearance:文本框; } 输入(type = "数量"]:徘徊, 输入(type = "数量"]:专注{ -moz-appearance:输入数字; } < input type = "数量" / >

铬:

在当前版本的Chrome中，(用户代理)这些元素上的-webkit-appearance属性的默认值已经是textfield。为了删除旋转器，需要在::-webkit-outer-spin-button/::-webkit-inner-spin-button伪类中将-webkit-appearance属性的值更改为none(默认为-webkit-appearance: inner-spin-button)。

输入(type = "数量"]::-webkit-outer-spin-button, 输入(type = "数量"]::-webkit-inner-spin-button { -webkit-appearance:没有; 保证金: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;
}

为了在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制定解决方案时遇到了麻烦。

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