如何禁用输入数字的旋转按钮？答案

【问题标题】：How to disable the spin buttons for input number?如何禁用输入数字的旋转按钮？
【发布时间】：2020-12-15 05:15:37
【问题描述】：

我正在尝试使用带有 typescript 的 Vue 中的 createElement() 添加输入类型编号的元素。有没有办法禁用增量和减量的旋转按钮？我已经尝试过使用：

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

但是在构建和部署之后，我看不到更改。

谢谢

【问题讨论】：

标签： html typescript vue.js

【解决方案1】：

问题在于您的 CSS 中有错字。 -webkit-outer.spin-button 应该是 -webkit-outer-spin-button。完整的是：

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

仅供参考，对于我的用例，我刚刚发现 here 是一个比隐藏按钮更好的选择，它也可能对您有用：

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

【讨论】：

【解决方案2】：

这直到最近才有效。我在 CSS 选择器中添加了 display: none;。现在是这样：

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

【讨论】：

请注意这里的 CSS 中有一个错字。 -webkit-outer.spin-button 应该是 -webkit-outer-spin-button