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

Question

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

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

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 属性，寻找伪元素。此图显示了输入元素 type="number"的结果: