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 keyboard is more interesting for the user than the normal one. This works nicely.

So, I have this piece of HTML here:

<h3>type="number"</h3>
<input type="number" class="input-number"/>
<h3>type="text"</h3>
<input type="text" class="input-text"/>

The important CSS elements applied here are:

input {
  height: 2em;
  padding: 0.2em 0.5em;
  width: 100%;

  /* avoid iPhone rounded corners */
  border: 1px solid #afb7c1;
  border-collapse: collapse;
  border-radius: 0 0 0 0;
}

.input-number {
  text-align: right;
}

Which should render like this:

The above is a screenshot taken from iOS 4.1, where the world was still OK. Also on Android phones, everything works fine. But check out what happens on iOS 4.2, 4.3:

All of a sudden, the number field is a bit less wide, almost as though the iPhone wants to make room for that useless spinner that appears on some browsers when the input has type="number".

Is anyone aware of such an issue? How did you fix it? Or work around it? Is there any other way to make mobiles prefer the numeric keyboard? Or is there some proprietary css style that I can apply to undo this additional right margin?

Erythrite

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...

Erythrite

Thank you for your question and answer. It helped me as I had a similar issue with Blackberry. – Emotion

Answer 2

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.

Telethermometer

That did it! Thank you so much. Unbelievable though, after all the hassle we had with the abominable Internet Explorer 6, there's a new CSS freak-episode with Webkit now... – Erythrite

Hello, see my newly accepted answer. Unfortunately, display: none leads to more problems when combined with input { width: 100% } :-/ Maybe you can use that, too – Erythrite

Thank you for your comment. As far as I know "-webkit-appearance: none; " is more useful for webkit UI elements. – Telethermometer

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;

Goofy

What about '-webkit-appearance: none;' ? – Goofy

I had already tried that one before. That removes the nice-looking shades, but the margin's still there :-/ – Erythrite

Answer 4

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 */
}

Brianbriana