Home/ Questions/Q 6352151
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T22:08:49+00:00

I want to use HTML input type=number on a mobile application, in order to

  • 0

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:

enter image description here

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:

enter image description here

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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…

    • 0