Is there a consistent way across browsers to hide the new spin boxes that some browsers (such as Chrome) render for HTML input of type number? I am looking for a CSS or javascript method to prevent the up/down arrows from appearing.
A:
with javascript just change the type to text. Might need to insert a new element to match the old one tho, then remove the old one ...
drachenstern
2010-09-24 21:06:28
A:
You're using stuff that the specification is not final on, so I'd say that no, there's going to be a completely consistent, cross-browser way of fixing this.
just use input type="text", and use a form of javascript validation to make sure it's a number.
GSto
2010-09-24 21:08:55
I am using the type="number" input to have mobile browsers customize their keyboard when typing in the field. This helps with only number fields like zip codes. I was hoping to be able to accomplish both a convenient mobile experience, and prevent the misleading increment and decrement input options on standard browsers.
Alan
2010-09-27 11:44:04
A:
Not what you asked for, but I do this because of a focus bug in WebKit with spinboxes:
// temporary fix for focus bug with webkit input type=number ui
if (navigator.userAgent.indexOf("AppleWebKit") > -1 && navigator.userAgent.indexOf("Mobile") == -1)
{
var els = document.querySelectorAll("input[type=number]");
for (var el in els)
el.type = "text";
}
It might give you an idea to help with what you need.
Gaurav
2010-10-08 11:10:33
This isn't exactly what I was talking about, but due to the current lack of standardization of HTML5 this is the best solution presented. Providing a different site for mobile than for desktop (no matter how it is implemented) seems like the only way to accomplish this currently. I did however have to create a copy of the element and change the 'type' value before adding it to the DOM. Since IE does not allow to modify the type of an input once the element has been added to the dom.
Alan
2010-10-28 18:39:04