Force up and down arrow for number input

June 16, 2015

Those with a keen eye will notice that the up and down arrows for the number input doesn’t show up in Chrome (and some other WebKit based browsers) until you hover or are focused on the input.

To force the arrows to be visible we just need to change the opacity of the inner and outer spin button.

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