Display flaw with HTML input type number on iPhone iOS/Safari

Question

I want to use HTML input type=\"number\" on a mobile application, in order to indicate to the smarter mobile phones (Android, iPhone and some others), that the numeric keybo

Answer 1

While vincicat's solution (previously accepted with the bounty) seemed to work at first, it revealed yet another rendering flaw in the Webkit browser. In 2 out of 10 page refreshes, the input was rendered with zero width, when put in a and styled with width: 100%...

A better solution (for my use-case) was found here:

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

It consists of these CSS styles:

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

Interesting addition: I've found the field very badly flawed in Blackberry's WebKit browsers. It seems to be the source of browser crashes. Having said this, we're not using that HTML 5 feature any longer...