Question

我的网站主要面向移动用户，但桌面也是如此。

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

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

是否可以使用-webkit-appearance或其他一些CSS技巧禁用此功能？我试过没多少运气。

Answer 1

我发现答案中有第二部分。

The first portion帮助了我，但我的type=number输入右边仍有空格。我已经将输入的余量归零，但显然我也必须将微调器的余量归零。

这解决了它：

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

Answer 2

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

Answer 3

不确定这是否是最好的方法，但这会让旋转器在Chrome 8.0.552.5 dev上消失：

input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Answer 4

似乎不可能阻止微调器出现在Opera中。作为临时解决方案，您可以为纺纱厂腾出空间。据我所知，以下CSS只添加了足够的填充，仅在Opera中使用：

noindex:-o-prefocus,
input[type=number] {
    padding-right: 1.2em;
}

Answer 5

您还可以使用以下技巧隐藏微调器：

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  opacity:0;
  pointer-events:none;
}

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

5 个答案: