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 <td> 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 <input type="number"/> 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...

Answer 2

I don't have access to the older iOS devices to test it but this works on modern iOS and at the same time Google Chrome has started to disobey width: as well, so this fixes both:

input[type=number] {
  max-inline-size: none; /* chrome 71 */
  max-width: unset; min-width: unset; /* iOS12 */
}

Answer 3

Not sure if this helps, but try to add these lines to the input css

-webkit-box-sizing: border-box;
box-sizing: border-box;

Answer 4

Actually the questioner himself is very close to the answer as he knows it is the spinner 's fault, and luckily webkit allow users to control it by CSS:

input[type="number"]::-webkit-outer-spin-button { display: none; }

Source: REMOVE SPIN CONTROL ON INPUT TYPE=NUMBER IN WEBKIT

Live demo: http://jsbin.com/aviram/5/

Hope it help.