在 input type="number" 上禁用 webkit 的旋转按钮？

小编典典

在 input type="number" 上禁用 webkit 的旋转按钮？

all

我有一个主要面向移动用户的网站，但也适用于桌面用户。

在 Mobile Safari 上，使用<input type="number">效果很好，因为它会在只包含数字的输入字段上显示数字键盘。

然而，在 Chrome 和 Safari
中，使用数字输入会在字段右侧显示旋转按钮，这在我的设计中看起来很垃圾。我真的不需要这些按钮，因为无论如何当你需要写一个像 6
位数字这样的东西时，它们是无用的。

是否可以使用-webkit-appearance或其他一些 CSS 技巧来禁用它？我试过没有太多运气。

阅读 109

2022-06-29

共1个答案

小编典典

下面的 CSS 适用于 Chrome 和 Firefox

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;
}

2022-06-29