4

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?

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
Lukas Eder
  • 211,314
  • 129
  • 689
  • 1,509

4 Answers4

7

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.

vincicat
  • 1,811
  • 1
  • 13
  • 13
  • 1
    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... – Lukas Eder Aug 05 '11 at 07:14
  • 1
    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 – Lukas Eder Aug 22 '11 at 14:25
  • Thank you for your comment. As far as I know "-webkit-appearance: none; " is more useful for webkit UI elements. – vincicat Aug 24 '11 at 15:53
6

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

Community
  • 1
  • 1
Lukas Eder
  • 211,314
  • 129
  • 689
  • 1,509
  • Thank you for your question and answer. It helped me as I had [a similar issue](http://stackoverflow.com/q/13453834/1047055) with Blackberry. – Pablo Nov 21 '12 at 12:12
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;
julesj
  • 754
  • 4
  • 10
0

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 */
}
Wil
  • 757
  • 9
  • 12