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

Question

跨浏览器是否有一致的方法来隐藏某些浏览器（例如 Chrome）为数字类型的 HTML 输入呈现的新旋转框？我正在寻找一种 CSS 或 JavaScript 方法来防止出现向上/向下箭头。

<input id="test" type="number">

原文由 Alan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此 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 属性，查找 Pseudo 元素。此图显示了输入元素 type=“number” 的结果：

原文由 antonj 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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">

原文由 swehren 发布，翻译遵循 CC BY-SA 3.0 许可协议