Turn Off Number Input Spinners

WebKit desktop browsers add little up down arrows to number inputs called spinners. You can turn them off visually like this:

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

Note that some other functionality still exists, like being able to increment the number via the scroll wheel on a mouse.

Screen Shot 2012-10-11 at 5.09.17 PM

Top, on, Bottom, off.

Comments

  1. User Avatar
    Rob Cameron
    Permalink to comment#

    Anyone have any idea of how to add styles to the spin buttons besides turning them off? I have a taller-than-default text box and I’d like to make the spinners a little bigger and easier to click…

    • User Avatar
      Jonathan Ankiewicz
      Permalink to comment#

      Yes, where margin:0 is, you should be able to just style the element from there.

      I am looking to find the documentation on this element. I want to turn the spinners on in mobile.

    • User Avatar
      Mukesh Shah
      Permalink to comment#

      Can we stop modifying values when we keep mouse cursor on focused element and scroll mouse wheel ? If yes, please provide solution.

  2. User Avatar
    Carlos
    Permalink to comment#

    Thanks!

  3. User Avatar
    Theo
    Permalink to comment#

    You can also style the buttons to your liking, by using :before and :after

    Here’s a very simple example and a fiddle (also includes a styled search input)

    input[type=number]::-webkit-inner-spin-button { 
        -webkit-appearance: none;
        cursor:pointer;
        display:block;
        width:8px;
        color: #333;
        text-align:center;
        position:relative;
    }
    
    input[type=number]::-webkit-inner-spin-button:before,
    input[type=number]::-webkit-inner-spin-button:after {
        content: "^";
        position:absolute;
        right: 0;
        font-family:monospace;
        line-height:
    }
    
    input[type=number]::-webkit-inner-spin-button:before {
        top:0px;
    }
    
    input[type=number]::-webkit-inner-spin-button:after {
        bottom:0px;
        -webkit-transform: rotate(180deg);
    }
    
    • User Avatar
      Roger Ramos

      Great!

    • User Avatar
      Theo
      Permalink to comment#

      This stopped working in Chrome a while ago. It seems you are no longer able to add pseudo elements to those selectors, which is a shame, since there’s only 1 selector for both up and down button

  4. User Avatar
    Saeid
    Permalink to comment#

    Use jQuery to disable the scroll wheel:

    $(':input[type=number]').on('mousewheel', function(e){
        $(this).blur(); 
    });
    
    • User Avatar
      Rhys

      DON’T blur it, just prevent the event. loosing focus on mousewheel is a bas experience.

      $(':input[type=number]').on('mousewheel', function(e){
          e.preventDefault();
      });
      
    • User Avatar
      Rhys

      that is to say, a bad experience

    • User Avatar
      Mig
      Permalink to comment#

      Why would you blur the input? How annoying for the user. Just prevent the event firing.

  5. User Avatar
    Tom
    Permalink to comment#

    how do the same in reverse order: -webkit-textfield-decoration-container set to read-only but buttons set to enabled ?

  6. User Avatar
    Jason
    Permalink to comment#

    How do you disable scrolling (cleanly) with AngularJS or HTML5? I’ve been looking through the docs but I can’t seem to find anything… I was momentarily impressed with the HTML5 spec for number but then I noticed this bug. :(

    • User Avatar
      Rocky S

      Hi,

      Did u find any solution to this? How to prevent using angular JS? Let me know if any?

      Thanks,
      Rocky

    • User Avatar
      Bruno
      Permalink to comment#

      You can write a directive like that:

      mod.directive('inputNumber', function () {
          return {
            restrict: 'A',
            link : function (scope, $element) {
              $element.on('focus', function () {
                angular.element(this).on('mousewheel', function (e) {
                  e.preventDefault();
                });
              });
              $element.on('blur', function () {
                angular.element(this).off('mousewheel');
              });
            }
          };
        });
      
  7. User Avatar
    Stephan
    Permalink to comment#

    Is there a solution for firefox 29?

  8. User Avatar
    Stephan
    Permalink to comment#

    Okay, here is the solution for firefox 29:

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

  9. User Avatar
    John

    Thanks for the FF 29 solution.

  10. User Avatar
    Anthony Hortin

    Ahhh nice! Thanks for the fix in FF 29 @Stephan! That’s perfect!

  11. User Avatar
    mike

    nice indeed stephan. thanks man!

  12. User Avatar
    Don

    Is there a way to have number inputs with and without spinners?

    I’m trying to tag certain inputs with a class name.

  13. User Avatar
    Pavel

    @Don
    input[type=number].input-number–noSpinners { -moz-appearance: textfield; }
    input[type=number].input-number–noSpinners::-webkit-inner-spin-button,
    input[type=number].input-number–noSpinners::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
    }

    Add the ‘input-number–noSpinners’ classname to the inputs you want without spinners.

  14. User Avatar
    Don

    @Pavel

    Thanks that worked!

  15. User Avatar
    eeklipzz
    Permalink to comment#

    Not sure it matters at this pint or anything for this particular article, but I just finished up some research on the name used for the spinner widget. Take a look when you get a chance. Other users might find this info helpful if they are researching the best way to implement this functionality…

    Is “Numeric Spinner” the best name for this?
    http://uxfindings.blogspot.com/2014/06/is-numeric-spinner-best-name-for-this.html

  16. User Avatar
    Andres
    Permalink to comment#

    This does NOT work on Opera Mobile, it insists in showing the annoying spinner buttons.

    • User Avatar
      Mike Kormendy

      It’s annoying that you’re considering Opera Mobile at all.

  17. User Avatar
    Jacob
    Permalink to comment#

    Love Bruno’s suggestion, but I wanted this to apply to all number input elements by default, so I modified it slightly. With the below code, the mousewheel gets disabled automatically (for number inputs) without any extra html!

    module.directive('input',function() {
        return {
            restrict: 'E',
            scope: {
                type: '@'
            },
            link : function (scope, $element) {
                if (scope.type == 'number') {
                    $element.on('focus', function () {
                        angular.element(this).on('mousewheel', function (e) {
                            e.preventDefault();
                        });
                    });
                    $element.on('blur', function () {
                        angular.element(this).off('mousewheel');
                    });
                }
            }
        }
    });
    
    • User Avatar
      Simon Blackwell
      Permalink to comment#

      If you want some field to have spinners and others not, since having step=”0″ is non-sensical for a spinner, you can do this:

      input[step="0"]::-webkit-inner-spin-button { -webkit-appearance: none;}

      Any input fields with a step of 0 will not get spinners, the rest will.

    • User Avatar
      bruce
      Permalink to comment#

      Beautiful Thanks.

  18. User Avatar
    Lalaina Pinard
    Permalink to comment#

    Thanks Simon! Nice one.
    One more thing, can’t we style those spinners? Like having a bigger height and width?

  19. User Avatar
    Nikhil
    Permalink to comment#

    @Bruno and Jacob: Thanks for the suggestion. I also want to disable the up and down keys for the same. How can I do that?

  20. User Avatar
    Jacob
    Permalink to comment#

    @Nikhil, not sure that’s possible with a number input (at least based on my research). What about using a text input? If you want a number input so that touch-based devices will pull up a number keyboard, you might want to try using two input fields (one “number” and one “text”) and then using javascript or css to display only the one that has the desired functionality on the current device.

  21. User Avatar
    Liam McArthur
    Permalink to comment#

    Here’s a solution that works for Firefox and other -moz based browsers:

    input[type='number'] {
        -moz-appearance:textfield;
    }
    
  22. User Avatar
    Eidel91
    Permalink to comment#

    @Pavel, @Liam McArthur

    i tried your solution, but it does’nt work… with FF 32 , HTML5, cshtml…

    -webkit-appearance is not reconized ….

    this ‘ -moz-appearance: textfield;’ is ok but I lose control specific type number….

  23. User Avatar
    Eidel91
    Permalink to comment#

    and ::-webkit-inner-spin-button does’t exist in choice for css ….

  24. User Avatar
    Web Master
    Permalink to comment#

    The original posted code does not work in FireFox. It works in Chrome and Opera. FireFox shows the spinners but do not adjust them to a specified box height. C and O do. Have not tested this in Windows 9+. Why work around it and waste time on it? Just wait until FireFox catches up. Rather expose / show the imperfection of a certain browser at any time than try fixing it. They all catch up on their imperfections pretty quick these days. December 18 2014.

  25. User Avatar
    max
    Permalink to comment#

    It does not work on firefox. Any ideas about that?

  26. User Avatar
    sanjeev

    cool!!

  27. User Avatar
    daub
    Permalink to comment#

    does not work in FF 38.0.6 on a PC

  28. User Avatar
    Adrian
    Permalink to comment#

    What if you want to show always the increment not on hover?

    • User Avatar
      Scott
      Permalink to comment#

      I believe you are referring to chrome behavior? I would also like to make the spinners always visible but have not found a way.

  29. User Avatar
    willem
    Permalink to comment#

    Any pointer to how I assign this to a specific number id=”mynumberfield” would be super!

    • User Avatar
      Ricky
      Permalink to comment#

      Try

      input#mynumberfield::-webkit-inner-spin-button, 
      input#mynumberfield::-webkit-outer-spin-button { 
          -webkit-appearance: none; 
          margin: 0; 
      }
      
  30. User Avatar
    Ashu
    Permalink to comment#

    This is not working in FF, opera,
    and if i use
    input[type=number] {
    -moz-appearance: textfield;
    }
    This loose control on specific type number. Please tell me the solution for FF and opera

  31. User Avatar
    rami
    Permalink to comment#

    firefox is not working webkit appearance

  32. User Avatar
    rub

    This post should be updated to

    input[type=number]::-webkit-inner-spin-button, 
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none; 
        margin: 0; 
        -moz-appearance: textfield;
    }
    
    • User Avatar
      rub

      oops…

      input[type=number] {
          -moz-appearance: textfield;
      }
      input[type=number]::-webkit-inner-spin-button, 
      input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        margin: 0; 
      }
      
    • User Avatar
      Scott
      Permalink to comment#

      in my Chrome v51 the -webkit-appearance:none; seems to not work anymore. I have instead used -webkit-appearance:textfield;

  33. User Avatar
    Akash
    Permalink to comment#

    Some time i need this spiner is there any way i can create a class of this code please help

  34. User Avatar
    MD.Riyaz
    Permalink to comment#

    Working with Firefox :

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag