是否可以始终显示输入“数字”的上/下箭头？

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";

}

Answer 1

如果您试图在不同的浏览器上获得相同的外观，您可能会被迫使用插件/小部件或自己构建一个插件/小部件，主浏览器似乎都以不同的方式实现数字旋转器。

试试jQueryUI的spinner小部件，它在样式方面提供了更多的通用性。

工作实例

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

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

Answer 2

我试过这个，效果很好

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

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

这里找到的

Answer 3

您可以通过使用“不透明度”属性（至少在Chrome中）实现这一点：

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

   opacity: 1;

}

如上所述，这可能只适用于Chrome。因此，在野外使用此代码时要小心，不要让其他浏览器掉队。