Search code examples
htmlcssgoogle-chromemetro-ui-css

Restore input type=number spinners in chrome

I have an application which theme is based on Metro UI CSS which hides the (I think) nice and usefull spinners Chrome adds when using <input type="number" />.

I am trying to "override" this rule, but I can't figure out what value I have to set it to:

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: initial !important;
}

Does not work (see FIDDLE).

What is the correct value to restore them?

P.S.: I am trying to avoid just removing the rule from the base CSS to avoid update problems...

Solution

  • Set -webkit-appearance to inner-spin-button, the default value for the buttons.

    input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
}