Html Number Input Field Always Display Spinner?

when I make a number input field like this: Then the number field gets a spinner added to it whenever I hover over the field. A lot of people talk ab

Solution 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.

Solution 2:

To make the spinner always show, leave out the ":hover" in Schneeez's answer.

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

Solution 3:

It is not possible to do this with the Browser specific style. You would need to either build that functionality yourself using some Javascript or look for a premade script on the interwebs.

You can only hide those Shadow DOM elements as they trigger very browserspecific css-attributes to provide the functionalitys like onclick or onhover.

See: http://css-infos.net/property/-webkit-appearance (You could trigger another behaviour for your Input-Field, but you cant force it to be always visible)