在输入类型=“number”时禁用webkit的自旋按钮？ [英] Disable webkit's spin buttons on input type="number"?

问题描述

我有一个网站主要面向移动用户，但桌面版本。

I have a site which is primarily for mobile users but desktop too.

在Mobile Safari上，使用< input type =

On Mobile Safari, using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.

在Chrome和Safari中，使用数字输入在字段的右侧显示旋转按钮，看起来像我的设计中的垃圾。我真的不需要按钮，因为它们是无用的，当你需要写一个像6位数的数字反正。

In Chrome and Safari however, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6-digit number anyway.

是否可以禁用 -webkit-appearance 或一些其他CSS技巧？

Is it possible to disable this with -webkit-appearance or some other CSS trick? I have tried without much luck.

推荐答案

下面的css适用于Chrome和Firefox

The below css works for both Chrome and 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;
}

这篇关于在输入类型=“number”时禁用webkit的自旋按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！