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

  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?

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

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