我可以隐藏 HTML5 数字输入的微调框吗？

javascript html css numbers input

2022-08-29 22:04:45

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

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

答案 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” 的结果：

Inspector for input type=number (Chrome)

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