在输入type="number"时禁用webkit的旋转按钮?

我有一个网站，主要是为移动用户，但桌面也。

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

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

是否有可能禁用这个与-webkit-appearance或其他CSS技巧?我试过了，运气不太好。

当前回答

你也可以用以下技巧隐藏旋转器:

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

2017-07-24 10:13:38

其他回答

我发现这个问题还有第二个答案。

第一部分帮助了我，但是在type=number输入的右边仍然有一个空格。我已经把输入的边距归零了，但显然我也要把转轮的边距归零。

这就解决了问题:

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

2011-01-27 03:28:15

另一种通过更改避免使用浏览器默认的数字类型微调器的解决方案

输入文本输入模式为数字和仅限数字模式“[0-9]*”

    <input type="text" inputmode="numeric" pattern="[0-9]*" />

与'number'类型不同，上述解决方案仍然允许用户在输入框中输入非数字字符，但您可以通过监听oninvalid事件来避免无效提交。

2021-08-29 07:09:34

下面的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;
}

2014-10-15 09:36:59

不确定这是否是最好的方法，但这使得旋转器在Chrome 8.0.552.5 dev上消失:

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

2010-10-20 17:38:12

你也可以用以下技巧隐藏旋转器:

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

2017-07-24 10:13:38

在输入type="number"时禁用webkit的旋转按钮?

推荐文章

最新文章

标签