(cache) 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

Rob Cameron

# January 24, 2013

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…

Reply ↓

Jonathan Ankiewicz

Permalink to comment# December 10, 2015

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.
Mukesh Shah

Permalink to comment# February 7, 2017

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

Carlos

# August 16, 2013

Thanks!

Reply ↓

Theo

# September 4, 2013

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

Reply ↓

Roger Ramos

Permalink to comment# May 8, 2015

Great!
Theo

Permalink to comment# December 27, 2016

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

Saeid

# October 11, 2013

Use jQuery to disable the scroll wheel:

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

Reply ↓

Rhys

Permalink to comment# May 26, 2014
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

Permalink to comment# May 26, 2014

that is to say, a bad experience
Mig

Permalink to comment# March 4, 2016

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

Tom

# October 12, 2013

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

Reply ↓

Jason

# March 28, 2014

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

Reply ↓

Rocky S

Permalink to comment# June 8, 2014

Hi,

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

Thanks,
Rocky

Bruno

# June 18, 2014

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

Stephan

# April 29, 2014

Is there a solution for firefox 29?

Reply ↓

Stephan

# April 29, 2014

Okay, here is the solution for firefox 29:

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

Reply ↓

safwan

Permalink to comment# November 22, 2014

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

Permalink to comment# February 16, 2015

Nice fix!
hullonason@gmail.com

Permalink to comment# December 21, 2015

But this defeats the purpose of limiting input to numbers lol.
Sang

Permalink to comment# January 5, 2016

Great! Thanks.

John

# May 1, 2014

Thanks for the FF 29 solution.

Reply ↓

Anthony Hortin

# May 4, 2014

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

Reply ↓

mike

# May 12, 2014

nice indeed stephan. thanks man!

Reply ↓

Don

# May 16, 2014

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

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

Reply ↓

Pavel

# May 23, 2014

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

Reply ↓

Don

# May 23, 2014

@Pavel

Thanks that worked!

Reply ↓

eeklipzz

# June 17, 2014

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

Reply ↓

Andres

# September 12, 2014

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

Reply ↓

Mike Kormendy

Permalink to comment# July 7, 2016

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

Jacob

# September 13, 2014

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

Reply ↓

Simon Blackwell

Permalink to comment# October 16, 2014

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# January 13, 2015

Beautiful Thanks.

Lalaina Pinard

# October 22, 2014

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

Reply ↓

Nikhil

# November 1, 2014

@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?

Reply ↓

Jacob

# November 2, 2014

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

Reply ↓

Liam McArthur

# November 19, 2014

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

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

Reply ↓

Eidel91

# November 27, 2014

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

Reply ↓

Eidel91

# November 27, 2014

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

Reply ↓

Web Master

# December 18, 2014

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.

Reply ↓

max

# April 8, 2015

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

Reply ↓

sanjeev

# May 21, 2015

cool!!

Reply ↓

daub

# June 11, 2015

does not work in FF 38.0.6 on a PC

Reply ↓

Adrian

# September 15, 2015

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

Reply ↓

Scott

Permalink to comment# June 15, 2016

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

willem

# March 10, 2016

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

Reply ↓

Ricky

# April 3, 2016

Try

input#mynumberfield::-webkit-inner-spin-button, 
input#mynumberfield::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
    margin: 0; 
}

Ashu

# April 14, 2016

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

Reply ↓

rami

Permalink to comment# April 17, 2016

hi Ashu

we can use
input[type=number] {
-moz-appearance: textfield;
}
this one
or else please refer this link—- http://exisweb.net/css-input-number-firefox —–it might be helpful………..

rami

# April 17, 2016

firefox is not working webkit appearance

Reply ↓

Dev

Permalink to comment# April 17, 2016

Hi Rami ,

u can prefer this solution:

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

or else please refer this link—- http://exisweb.net/css-input-number-firefox —–it might be helpful………..

Thanks

rub

# May 2, 2016

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

Reply ↓

rub

# May 2, 2016

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

Scott

Permalink to comment# June 15, 2016

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

Akash

# July 27, 2016

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

Reply ↓

MD.Riyaz

# December 10, 2016

Working with Firefox :

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

Reply ↓

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.

Turn Off Number Input Spinners

Comments

Submit a Comment

Posting Code

Code of Conduct

Want to tell us something privately?