html number input field always display spinner?

Question

when I make a number input field like this:

<input type="number" />

Then the number field gets a spinner added to it whenever I hover over the field. A lot of people talk about how to disable these spinners like this:

http://css-tricks.com/snippets/css/turn-off-number-input-spinners/

But I would like to know how do you make them ALWAYS visible and not just when you hover over them?

Answer 1

It's the Chrome opacity settings that are giving you a headache. This will solve your issue:

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

This being the problem is kind of opaque.