Styling an input type=number

Question

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?

Answer 1

UPDATE 17/03/2017

Original solution won't work anymore. The spinners are part of 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" />

You can try the following but keep in mind that works only for Chrome:

input[type=number]::-webkit-inner-spin-button {       -webkit-appearance: none;      cursor:pointer;      display:block;      width:8px;      color: #333;      text-align:center;      position:relative;  }    input[type=number]::-webkit-inner-spin-button:before,  input[type=number]::-webkit-inner-spin-button:after {      content: "^";      position:absolute;      right: 0;  }    input[type=number]::-webkit-inner-spin-button:before {      top:0px;  }    input[type=number]::-webkit-inner-spin-button:after {      bottom:0px;      -webkit-transform: rotate(180deg);  }

<input type="number" />