如何隐藏 HTML5 数字输入上的旋转框？

隐藏 HTML5 数字输入的旋转框

Chrome 等现代浏览器通常会在 HTML5 数字输入旁边显示旋转框，以便于调整值。然而，这些旋转框有时会干扰用户界面。

隐藏旋转框的一种方法是通过 CSS：

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

此 CSS 有效地隐藏了 Webkit 浏览器中的旋转框（例如、Chrome 和 Safari），同时使用 -moz-appearance:textfield 属性确保与 Firefox 的兼容性。

通过实现此 CSS，您可以防止显示向上/向下箭头，为您的数字输入提供更干净、更精简的用户界面。

以上是如何隐藏 HTML5 数字输入上的旋转框？的详细内容。更多信息请关注PHP中文网其他相关文章！