number input - always show spin buttons

Question

In Google Chrome, input[type=number] spin buttons are shown only on hover.

This is the code I use:

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

Is there any way to always show spin buttons?

Answer 1

You can target spin buttons using ::-webkit-inner/outer-spin-button and than just set opacity to 1 (spins are always there, but in default they have opacity: 0).

Code:

<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/