type="number" causing form field to shrink

Using iOS 4.2.1 on iPad/iPh开发者_运维问答one, when I view a specific web page with type="number" for a text field, the text input space is slightly shorter than when it's type="text". And when I enter 3 digits, the first one gets cutoff, while it does not get cutoff with type="text". This problem does not happen on iOS 3.x on iPad/iPhone. The input field input area is identical, and it works fine.

Has anyone noticed this problem? Is there anything I can do to fix it? Thanks.

It's probably to do with the device browser's default style sheet. If you just apply styles the same styles to the text and number input fields it should render the same.

input[type=text], input[type=number] {
    width: 100px;
    padding: 1px 0;
    ...etc...
}

You need to set the unit when styling width and height.

<input syle="width: 45px; padding: 1px 0;" name="mname" type="text" value="" autofocus />

or preferred:

input[type=number] {
width: 45px;
}