是否有跨浏览器一致的方法来隐藏某些浏览器（例如 Chrome）为类型编号的 HTML 输入呈现的新旋转框？我正在寻找一种 CSS 或 JavaScript 方法来防止出现向上/向下箭头。
<input id="test" type="number">
我可以隐藏 HTML5 数字输入的旋转框吗？
IT技术
javascript
css
html
input
numbers
2021-02-03 22:19:44
6个回答
此 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 属性，查找伪元素。下图显示了输入元素 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"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}<input type="number" />更长的答案：
要添加到现有答案...
火狐：
在当前版本的 Firefox 中，这些元素的-moz-appearance属性（用户代理）默认值为number-input. 将其更改为该值可以textfield有效地删除微调器。
input[type="number"] {
-moz-appearance: textfield;
}
在某些情况下，您可能希望微调器最初是隐藏的，然后出现在悬停/焦点上。（这是当前 Chrome 中的默认行为）。如果是这样，您可以使用以下方法：
input[type="number"] {
-moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
-moz-appearance: number-input;
}<input type="number"/>铬合金：
在当前版本的 Chrome 中，这些元素上-webkit-appearance属性的（用户代理）默认值已经是textfield。为了消除微调，该-webkit-appearance属性的值需要被改变none的::-webkit-outer-spin-button/::-webkit-inner-spin-button伪类（它是-webkit-appearance: inner-spin-button默认情况下）。
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}<input type="number" />值得指出的margin: 0是，用于删除旧版本 Chrome中的边距。
目前，在撰写本文时，这里是“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;
}
根据Apple 的移动版 Safari 用户体验编码指南，您可以使用以下命令在 iPhone 浏览器中显示数字键盘：
<input type="text" pattern="[0-9]*" />
A patternof\d*也将起作用。
尝试使用input type="tel"。它会弹出一个带数字的键盘，但不显示旋转框。它不需要 JavaScript 或 CSS 或插件或其他任何东西。
