在输入类型=“数字”上禁用webkit的旋转按钮？

一尘不染

在输入类型=“数字”上禁用webkit的旋转按钮？

html

我有一个主要针对移动用户的网站，但也针对台式机。

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

但是，在Chrome和Safari中，使用数字输入会在字段的右侧显示旋转按钮，这在我的设计中看起来像废话。我真的不需要按钮，因为当您仍然需要编写6位数字之类的东西时，它们是无用的。

是否可以通过-webkit-appearance其他CSS技巧来禁用此功能？我尝试了很多运气。

阅读 338

2020-05-10

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

2020-05-10