Disable webkit's spin buttons on input type="number"?

Question

I have a site which is primarily for mobile users but desktop too.

On Mobile Safari, using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.

In Chrome and Safari however, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6-digit number anyway.

Is it possible to disable this with -webkit-appearance or some other CSS trick? I have tried without much luck.

Answer 1

Not sure if this is the best way to do it, but this makes the spinners disappear on Chrome 8.0.552.5 dev:

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