Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

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. 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…

  2. Carlos
    Permalink to comment#

    Thanks!

  3. 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);
    }
    
  4. Saeid
    Permalink to comment#

    Use jQuery to disable the scroll wheel:

    $(':input[type=number]').on('mousewheel', function(e){
        $(this).blur(); 
    });
    
    • 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();
      });
      
    • Rhys

      that is to say, a bad experience

  5. 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. 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. :(

    • Rocky S

      Hi,

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

      Thanks,
      Rocky

    • 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. Stephan
    Permalink to comment#

    Is there a solution for firefox 29?

  8. Stephan
    Permalink to comment#

    Okay, here is the solution for firefox 29:

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

  9. John

    Thanks for the FF 29 solution.

  10. Anthony Hortin

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

  11. mike

    nice indeed stephan. thanks man!

  12. 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. 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. Don

    @Pavel

    Thanks that worked!

  15. 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. Andres
    Permalink to comment#

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

  17. 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');
                    });
                }
            }
        }
    });
    
    • 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.

    • bruce
      Permalink to comment#

      Beautiful Thanks.

  18. 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. 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. 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. 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. 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. Eidel91
    Permalink to comment#

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

  24. 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. max
    Permalink to comment#

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```