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

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

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


}

120488 次浏览

小开

If you're trying to get the same appearance across different browsers you may be forced to use a plugin/widget or build one yourself, the main browsers all seem to implement number spinners differently.

Try jQuery UI's spinner widget it offers a lot more versatility when it comes to styling.

Working Example

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


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

小开

最佳答案

You can achieve this (in Chrome at least) by using the Opacity property:

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


opacity: 1;


}

As stated above, this will likely only work in Chrome. So be careful using this code in the wild without a fallback for other browsers.

小开

I tried this and it worked

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


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

Found Here

小开

If you don't mind the focus on your input, do

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

小开

I tried this and it's working

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