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">
  • 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.– calvinfSep 24 '10 at 21:09
  • 60
    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.– AlanSep 27 '10 at 11:47
  • 1
    If you're using number inputs, be sure to use something that plays nice with modern iOS, Android, and Desktop browsers: <input type="number" pattern="[0-9]*" inputmode="numeric">. More info: stackoverflow.com/a/31619311/806956– Aaron GrayJul 24 '15 at 20:40

13 Answers13

up vote790down voteaccepted

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-outer-spin-button,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 elements. This image shows results for an input element type="number":

Inspector for input type=number (Chrome)

  • 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?– AlanNov 29 '10 at 15:14
  • 7
    Just found it! 'webkit-inner-spin-button' controls the spinners for Linux and Windows. Thanks for all your help antonj!– AlanNov 29 '10 at 15:16
  • 10
    It seems that Chrome no longer has a problem, so you can just use display: none; as the only thing inside the selector– philfreoSep 11 '12 at 18:19
  • 9
    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.– mgolFeb 5 '13 at 14:44
  • 2
    for the record, Chrome also has input::-webkit-clear-button for the X button– aldo.roman.nurenaOct 4 '13 at 18:33

Firefox 29 currently adds support for number elements, so here's a snippet for hiding the spinners in webkit and moz based browsers:

input[type='number'] {-moz-appearance:textfield;}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}
<input id="test" type="number">

  • That plus the 'margin: 0' from antonj's answer is what I used– Asfand QaziJan 24 at 16:56
  • 1
    This works great!– NekoLopezJun 15 at 15:54

Short answer:

input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}input[type="number"] {-moz-appearance: textfield;}
<input type="number" />

Longer answer:

To add to existing answer...

Firefox:

In current versions of Firefox, the (user agent) default value of the -moz-appearance property on these elements is number-input. Changing that to the value textfield effectively removes the spinner.

input[type="number"] {-moz-appearance: textfield;}

In some cases, you may want the spinner to be hidden initially, and then appear on hover/focus. (This is currently the default behavior in Chrome). If so, you can use the following:

input[type="number"] {-moz-appearance: textfield;}input[type="number"]:hover,input[type="number"]:focus {-moz-appearance: number-input;}
<input type="number"/>


Chrome:

In current versions of Chrome, the (user agent) default value of the -webkit-appearance property on these elements is already textfield. In order to remove the spinner, the -webkit-appearance property's value needs to be changed to none on the ::-webkit-outer-spin-button/::-webkit-inner-spin-button pseudo classes (it is -webkit-appearance: inner-spin-button by default).

input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
<input type="number" />

It's worth pointing out that margin: 0 is used to remove the margin in older versions of Chrome.

Currently, as of writing this, here is the default user agent styling on the 'inner-spin-button' pseudo class:

input::-webkit-inner-spin-button {-webkit-appearance: inner-spin-button;display: inline-block;cursor: default;flex: 0 0 auto;align-self: stretch;-webkit-user-select: none;opacity: 0;pointer-events: none;-webkit-user-modify: read-only;}
  • 10
    i like this answer better because it includes relevant firefox info, which, when developing something, needs to be considered. webkit-only answers that ignore other browser engines leave much to be desired– RozzAAug 4 '16 at 21:13
  • 1
    should be accepted answer– Hsin-Yu ChenJun 9 at 19:26

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:

<input type="text" pattern="[0-9]*" />

A pattern of \d* will also work.

  • 4
    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.– JanMar 20 '12 at 10:55
  • 18
    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'KaneAug 15 '13 at 16:21
  • 17
    83 iPhone users voted UP for this answer. Android users, please vote DOWN. It is Apple-only.– andreszsSep 12 '14 at 18:03
  • 5
    @Andrew sir you have my downvote– PuceFeb 18 '15 at 10:19
  • 3
    Here's a nice solution for both Android and iOS: stackoverflow.com/a/31619311/806956– Aaron GrayJul 24 '15 at 20:36

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 CSS or plugins or anything else.

  • 13
    This solution does not currently do any validation in any browsers like type=number does.– PepijnJun 18 '13 at 10:23
  • 4
    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'KaneAug 15 '13 at 16:38
  • 9
    there is no "." in the tel keyboard :-<– gion_13Sep 3 '13 at 12:59
  • 1
    @RoryO'Kane The number keyboard has a really big disadvantage that it will deny any input that is not strictly a number.– Jochem KuijpersAug 17 '14 at 22:04
  • 2
    This is not a solution, and by the HTML5 standards its stupid. input[tel] is for phone numbers, input[number] is for generic numbers, including floating point ones. So this is not a solution at all.– Vasil PopovApr 27 '15 at 12:32

I've encountered this problem with a input[type="datetime-local"], which is similar to this problem.

And I've found a way to overcome this kind of problems.

First, you must turn on chrome's shadow-root feature by "DevTools -> Settings -> General -> Elements -> Show user agent shadow DOM"

Then you can see all shadowed DOM elements, for example, for <input type="number">, the full element with shadowed DOM is:

<input type="number"><div id="text-field-container" pseudo="-webkit-textfield-decoration-container"><div id="editing-view-port"><div id="inner-editor"></div></div><div pseudo="-webkit-inner-spin-button" id="spin"></div></div></input>

shadow DOM of input[type="number"

And according to these info, you can draft some CSS to hide unwanted elements, just as @Josh said.

    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;
    <input id="test" type="number">

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

      • 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.– AlanOct 28 '10 at 18:39

      On Firefox for Ubuntu, just using

       input[type='number'] {-moz-appearance:textfield;}

      did the trick for me.

      Adding

      input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}

      Would lead me to

      Unknown pseudo-class or pseudo-element ‘-webkit-outer-spin-button’. Ruleset ignored due to bad selector.

      everytime I tried. Same for the inner spin button.

      • -webkit-* is for Chrome, -moz-* is for mozilla firefox. That's why it didn't work for you.– Gusstavv GilJan 26 '17 at 6:46

      This is more better answer i would like to suggest on mouse over and without mouse over

      input[type='number'] {appearance: textfield;}input[type='number']::-webkit-inner-spin-button,input[type='number']::-webkit-outer-spin-button,input[type='number']:hover::-webkit-inner-spin-button, input[type='number']:hover::-webkit-outer-spin-button {-webkit-appearance: none; margin: 0; }

        To make this work in Safari I found adding !important to the webkit adjustment forces the spin button to be hidden.

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

        I am still having trouble working out a solution for Opera as well.

          Maybe change the number input with javascript to text input when you don't want a spinner;

          document.getElementById('myinput').type='text';

          and stop the user entering text;

           document.getElementById('myinput').onkeydown=function(e) {if(!((e.keyCode > 95 && e.keyCode < 106)|| (e.keyCode > 47 && e.keyCode < 58) || e.keyCode==8|| e.keyCode==9)) {return false;}}

          then have the javascript change it back in case you do want a spinner;

          document.getElementById('myinput').type='number';

          it worked well for my purposes

          • This wont work with copy paste– gilamranJun 28 at 13:14

          I know this question has been answered and is old but let me add a little. The above answers (referring to @swehren's answer) are correct but when the input is being disabled, you can still type alphanumeric characters.

            Your Answer

             

            By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

            Not the answer you're looking for? Browse other questions tagged or ask your own question.