input type number

html5 number input

20 Apr 2011

If you use the new html5 input types, like I do, you may encounter some differences in the way browsers style them. I wrote about the search field last year. Today I came across the input type="number". In safari, chrome and opera there appears a spinner beside it, a spinner that the client didn't want.

So to remove that, we go:

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

And presto we're done. Now the input looks like a text field in chrome and safari.

The only loose end we have now is Opera, if anyone knows of a trick to remove the spinner there, I would love to hear it.

← Home