Styling an input type=number

Issue

Is it possible to apply a style in the inner "up arrow" and "down arrow" of a <input type="number"> in CSS? I would like to change the background of the up arrow to blue and the down arrow to red. Any ideas?

Solution

The spinners are part of the Shadow DOM. For now, just to hide in Chrome, use:

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

<input type="number" />

or to always show:

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

<input type="number" />

Answered By - Alex Char