Turn Off Number Input Spinners | CSS-Tricks

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.

rahul chhalotre

# August 23, 2018

This really works…

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

Tromgy

Permalink to comment# June 20, 2019
I found that increasing line-height value makes the arrow buttons larger, while simply height attribute keeps the box itself the desired size:
```
input {
  height: 30px;
  line-height: 45px;
}
```

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!
[email protected]

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

David A.

Permalink to comment# June 2, 2017

Thanks. Really helped alot and it works perfectly
Shankar Mahadevan

Permalink to comment# November 20, 2017

Thanks. works perfect (y)

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

sana

Permalink to comment# August 27, 2017

i used padding to make it bigger.

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

Deepal

# October 2, 2017

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

its working but i dnot want to enter any text in the field. then what can i do.this is not perfect solution.

Reply

Sand Of Vega

# February 8, 2018

Thanks a lot. This is very helpful. :)

Reply

limecliq

# May 10, 2018

Thanks for this. I’m super excited to find a solution. This spinners can be very much unwanted at certain points. Great to know that I can always toggle it on/off

Reply

Raviraj

# February 19, 2019

It is not working in Mozilla

Reply

Geoff Graham

Permalink to comment# February 19, 2019

Note that the text says this snippet is for WebKit browsers. Firefox would require a different solution.

Vadim

# April 21, 2019

input {
  -moz-appearance: textfield;
}

Naveen Kumar

# May 23, 2019

It worked like a pro, thank you so much.

Reply

Ctibor

# August 26, 2019

There is uncomplete solution on https://css-tricks.com/snippets/css/turn-off-number-input-spinners/
Works for chrome, but for firefox you need to include:

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

to make it work
credit: https://stackoverflow.com/a/23374725/861615

Reply

Alireza

# August 31, 2019

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

for firefox

Reply

cejota

# August 31, 2019

Excellent! but only works on chrome, is there any way to do it in mozilla?

Reply

Tejashree

# September 10, 2019

For disabling scroll option for chrome and firefox you can use below js code:

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

Reply

Payam Shahidi

# September 13, 2019

Does not work on Firefox (69.0 (64-bit))

Reply

Eduard Maura i Puig

# October 23, 2019

For Firefox you need to add:

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

Reply

Savannah

# June 5, 2020

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

Reply

Yumarx

# July 13, 2020

$(document).on(“wheel”, “input[type=number]”, function (e) {
$(this).blur();
});

Reply

Emmie

# December 2, 2020

I’m not sure what the margin: 0 is needed for, I can’t really see any difference when not using it. Does the spinner change the size of the input element unless the margin is reset?

Perhaps it’s because of the CSS normalization I’m using I’m not seeing difference.

Reply

Abdul Mutal

# June 18, 2021

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}

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

Reply

Comments

Leave a Reply Cancel reply