Take the 2-minute tour ×

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.

<input id="test" type="number"/>
share|improve this question
Can you post an example of the code you're using? A screenshot would be great as well so we know what you're looking at. I'm looking at <input type="number" min="4" max="8" /> in Chrome and seeing a typical input field with up and down arrows on the side. –  calvinf Sep 24 '10 at 21:09
You are seeing exactly what I am seeing. I am trying to keep the type=number markup to ensure that mobile browsers bring up an appropriate keyboard, and prevent the up and down arrows from appearing in computer browsers. –  Alan Sep 27 '10 at 11:47
add comment

7 Answers

up vote 218 down vote accepted

This CSS effectively hides the spin-button for webkit browsers (have tested it in Chrome 7.0.517.44 and Safari Version 5.0.2 (6533.18.5)):

input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */

You can always use the inspector (webkit, possibly Firebug for Firefox) to look for matched CSS properties for the elements you are interested in, look for Pseudo elemnts. This image shows results for an input element type="number":

Inspector for input type=number (Chrome)

share|improve this answer
I tested this on OS X, and it behaved just as you described. However, testing it on Windows and Linux (Ubuntu) produced no results. Even on identical versions of Chrome, OS X Chrome had no spin buttons but Windows Chrome did. Any idea what the difference might be? –  Alan Nov 29 '10 at 15:14
Just found it! 'webkit-inner-spin-button' controls the spinners for Linux and Windows. Thanks for all your help antonj! –  Alan Nov 29 '10 at 15:16
It turns out this has a bug in Chrome right now. If you hover over the area where the spinner buttons would have been, the browser tab crashes. This bug seems to have been filed and fixed in the next version to come out. –  Alan Dec 6 '10 at 0:52
It seems that Chrome no longer has a problem, so you can just use display: none; as the only thing inside the selector –  philfreo Sep 11 '12 at 18:19
This is unfortunately not cross-browser so I'd advise against using type=number if you have to hide these arrows. E.g. currently they'd be still displayed in Opera and they'll start being displayed in Firefox, IE etc. when they implement this input type. –  m_gol Feb 5 '13 at 14:44
show 4 more comments

With JavaScript, just change the type to text. Though you might need to insert a new element to match the old one, then remove the old one.

share|improve this answer
The “insert a new element” caveat refers to this problem with changing the type of inputs. –  Rory O'Kane Aug 15 '13 at 16:54
add comment

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.

share|improve this answer
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 Sep 27 '10 at 11:44
add comment

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.

share|improve this answer
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 Oct 28 '10 at 18:39
add comment

According to Apple’s user experience coding guide for mobile Safari, you can use the following to display a numeric keyboard in the iPhone browser:


A pattern of \d* will also work.

share|improve this answer
Despite the above, checked solution works very well for the given problem, I decided to switch to this solution, here. One reason is, that e.g. the Opera browser also shows the arrows, which you also should prevent. Secondly, I observed bigger problems in Chrome 17. There, on the one hand, the 'maxlen' attribute does not seem to work any longer; you can enter as many characters as you like there. On the other hand, numbers that exceed a certain length are simply rounded. Using this solution for "just opening the numpad on an iOS device" seems to be safer for me. –  Jan Mar 20 '12 at 10:55
I went with this solutions as well, as i had some JS that formated the number in the inputfield when i typed and that didn't work with a number field. So this one worked like a charm. –  Tokimon Jun 7 '12 at 9:14
This currently does nothing on Android, in all browsers. Tested on this test page in Browser 4.2.2, Chrome 28, and Firefox 23 on Android 4.2. Those browsers just show the standard text keyboard with this markup. –  Rory O'Kane Aug 15 '13 at 16:21
This is not working on Chrome! –  Mahdi Oct 20 '13 at 13:35
add comment

Try using type="tel" instead. HTML5 compatible.

share|improve this answer
(This answer has been overshadowed by this other answer about input type="tel".) –  Rory O'Kane Aug 15 '13 at 16:51
add comment

Try using input type="tel" instead. It pops up a keyboard with numbers, and it doesn’t show spin boxes. It requires no JavaScript or plugins.

share|improve this answer
Magic, thank you! –  codinghands Jun 13 '13 at 8:29
This solution does not currently do any validation in any browsers like type=number does. –  Pepijn Jun 18 '13 at 10:23
The telephone keyboard is not as good as the number keyboard, though it’s far better than the text keyboard. The telephone keyboard has irrelevant letters and symbols that are omitted from the number keyboard. (Tested with this page on Android 4.2.) –  Rory O'Kane Aug 15 '13 at 16:38
there is no "." in the tel keyboard :-< –  gion_13 Sep 3 '13 at 12:59
Thats the best solution.. works on android and ios –  neiker Feb 19 at 19:48
show 1 more comment

Your Answer


