输入框“number”是否可以始终显示上下箭头？

Question

我想在“数字”输入字段中始终显示上/下箭头。这可能吗？到目前为止，我还没有任何运气...

http://jsfiddle.net/oneeezy/qunbnL6u/ HTML：

<input type="number" />

CSS：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   -webkit-appearance: "Always Show Up/Down Arrows";

}

- Oneezy

---

可能是number input - always show spin buttons的重复问题。 - Samuel Liew

你找到解决方案了吗？在我的情况下它不起作用。 - Kid

你在用什么浏览器？它可以在Chrome中工作。 - Oneezy

Answer 1

你可以通过使用透明度属性（至少在Chrome浏览器中）来实现这一点：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  

   opacity: 1;

}

如上所述，这可能只适用于Chrome浏览器。因此，在野外使用此代码时请注意，务必为其他浏览器提供备用方案。

- BJack

---

正如@NewBeeee所说，在Firefox和Safari中，始终显示输入框旁的增减控制按钮是默认功能。(来源：https://dev59.com/TmAf5IYBdhLWcg3wyVF1) - titusfx

Answer 2

我尝试了这个方法，它有效。

input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}

</style>
<input type="number" value="1" min="1" max="999">

在这里找到

- Atta H.

---

能否在input type="text"中显示上下数字范围选项？因为我正在应用正则表达式验证：Validators.pattern(/^[1-9][0-9]{0,2}$/)，以限制用户只输入1到999之间的值。由于相同的模式允许用户输入以0开头的01、0999等值，这是不正确的，所以我使用文本输入，而不是数字输入。虽然这种数字类型具有默认显示上/下箭头的min和max功能。 - bts_dev

Answer 3

我试过这个方法，它有效。

input[type=number]::-webkit-inner-spin-button {
    opacity: 1
}

- Munish Kumar

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 4

如果您想在不同的浏览器中获得相同的外观，您可能需要使用插件/小部件或自己构建，因为主要浏览器似乎都以不同的方式实现数字微调器。

尝试jQuery UI 的微调器部件，它在样式方面提供了更多的灵活性。

工作示例

<p>
    <label for="spinner">Select a value:</label>
    <input id="spinner" name="value" />
</p>

$("#spinner").spinner();

- apaul

---

我并不想获得所有浏览器的支持，我只是想知道是否有一种CSS技巧可以让它们始终可见。 - Oneezy

我的整个想法是“优雅降级”..如果浏览器不支持它，它将只显示为文本框。如果支持，它们将采用默认数字微调器的外观，但不仅仅在悬停时。 - Oneezy

JQuery UI存在许多与Bootstrap冲突的问题。因此，如果您的项目中使用了Bootstrap，则可能会遇到麻烦。 - Dattatreya Kugve

Answer 5

对我来说，只有额外的 CSS 设置有帮助：

<style>
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button 
  {
    opacity: 1;
  }

  input[type=number]::-webkit-outer-spin-button, 
  input[type=number]::-webkit-inner-spin-button 
  {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
  }
</style>

- Intacto

Answer 6

如果您不介意关注您的输入，请

   document.getElementById(<id>).focus();

- Irina Rapoport