Is it possible to always show up/down arrows for input "number"?

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'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();