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

Posted 2023-03-06

【中文标题】在 input type="number" 上禁用 webkit 的旋转按钮？

【英文标题】：Disable webkit's spin buttons on input type="number"?

【发布时间】：2011-04-27 21:47:10

【问题描述】：

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

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

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

是否可以使用 -webkit-appearance 或其他一些 CSS 技巧来禁用它？我试过了，但运气不好。

【问题讨论】：

如果您因为其他原因更喜欢使用type="text"而只切换到数字来实现数字键盘功能，您可以使用pattern="[0-9]*"获取键盘功能，让您保留type="text"。见***.com/questions/6171903/…

【参考方案1】：

不确定这是否是最好的方法，但这会使微调器在 Chrome 8.0.552.5 dev 上消失：

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

【讨论】：

@JethroLarson 什么不起作用？你可以试试-webkit-outer-spin-button。

这对 type="date" 很有效： input[type=date]::-webkit-outer-spin-button -webkit-appearance: none;

【参考方案2】：

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

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

这解决了它：

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

【讨论】：

太棒了。我有一个 similar issue，但 CSS 策略略有不同，这会导致全新的问题......

有谁知道一种修复滚动行为的方法，您可以无限地上下滚动？我在输入元素中设置了min=0.01（和max 为任意值），但我更希望滚轮在页面上上下移动。我正在使用 AngularJS，但在 atm 中找不到任何东西。

链接回此特定问题和此类信息的权威来源：css-tricks.com/snippets/css/turn-off-number-input-spinners

要清楚，这不会删除鼠标滚动功能！

-moz-appearance: Firefox 的文本字段

【参考方案3】：

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

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

【讨论】：

@Knu 确实，但这里值得一提，因为答案中的代码使输入无法在 Opera 中使用。

@Goulvench 请不要 :) 我发现它非常有用，其他人也可能。

【参考方案4】：

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

【讨论】：

比上面更好的解决方案（更完整）

-moz-外观：文本字段；加法是唯一对我有用的答案。谢谢！

【参考方案5】：

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

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

【参考方案6】：

通过更改避免number type 的浏览器默认微调器的另一种解决方案

输入文字

输入模式为数字和

仅数字模式“[0-9]*”

---

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

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