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

    • safwan
      Permalink to comment#

      Thank you, I have been looking for a possible way without using javascript and for firefox

  9. John

    Thanks for the FF 29 solution.

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

  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;
    }
    

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".