The Disappointing Browser Support of the New HTML5 Number Input
Edit on 2013/01/09: I think the CSS3 property
box-sizing: border-box could fix this issue.
I was creating a landing page for a client today and I thought I’d try an element of the HTML5 specification-in-the-making:
<input type="number" />
The issue I have is that the size must be controlled through CSS. WebKit (Chrome) claims to implement this input type, but the way it sizes the box doesn’t appear to be accurate with respect to the width and padding attributes. While this inconsistent sizing behavior may be acceptable on larger forms where the inputs are over 100 pixels, on smaller input fields, it’s simply unusable to me. The new interface takes up more space, so you either make it crammed and unusable in WebKit (not enough room to view the input), or you have a huge input field on older browsers which default to the type=”text” method.
I would still recommend it on larger forms, if you don’t wish to use jQuery. It seemed to work fine in Chrome otherwise.