从输入字段中删除递增和递减图标

Question

我的输入如下：

 <input id="phone_area_code" maxlength="3" type="number" class="ember-view ember-text-field">

渲染后，它会自动添加增量和减量按钮，如下所示。因此， maxLength 不起作用（例如：如果输入为 999 并且我单击增量，则允许 1000）

我尝试了以下答案：

https://stackoverflow.com/a/22306944

但是，没有用。如何摆脱这些按钮？

原文由 Abhi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

在您链接的帖子的评论中隐藏的是使用 tel 输入类型的建议：

 <input type="tel" value="111">

关于 number 类型的一些建议：

number 输入类型接受 min 和 max 属性以设置数量限制。

 <input min="1" max="10" type="number" value="1">

鉴于您似乎正在使用 Ember，这可能更合适：

 {{input type="number" min="1" max="10"}}

如果你真的想隐藏按钮：

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

input[type=number] {
  -moz-appearance: textfield;
}

 <input type="number" min="1" max="10" value="1">

您仍然可以使用箭头键来增加/减少该值。

原文由 jdlm 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

input[type=number] {
  -moz-appearance: textfield;
}

 <input type="number" min="1" max="10" value="1">

原文由 JcKanaparthi 发布，翻译遵循 CC BY-SA 3.0 许可协议