数字输入 - 总是显示微调按钮

Question

在 Google Chrome 中，只有在鼠标悬停时才会显示 input[type=number] 的旋转按钮。 这是我使用的代码：

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

有没有办法始终显示旋转按钮？

- Draex_

Answer 1

您可以使用 ::-webkit-inner/outer-spin-button 选择微调按钮，然后将 opacity 设置为1（微调按钮始终存在，但默认情况下其 opacity: 0）。

代码：

<style>  

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

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

Fiddle: http://jsfiddle.net/dk8fj/

- pavel

---

有跨浏览器的方法吗？ - István Pálinkás

其他浏览器如Firefox怎么办？它只在Chrome中工作。 - hfarazm

在Firefox和Safari中，它们默认会始终显示这个功能。 - Rathore25

你有移动端的解决方案吗？我想要构建一个Web应用程序。 - Nzui Manto

值得注意的是，在Safari 12.1上使用iPad，@Rathore25的评论已经不再适用。Safari不会显示输入类型数字微调器。 - Martin