Display flaw with HTML input type number on iPhone iOS/Safari
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