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

【问题标题】：Disable webkit's spin buttons on input type="number"?在 input type="number" 上禁用 webkit 的旋转按钮？
【发布时间】：2011-04-27 21:47:10
【问题描述】：

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

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

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

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

【问题讨论】：

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

标签： css html webkit

【解决方案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事件来避免无效提交。

【讨论】：