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.

David blogged another method in June 2021:
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
opacity: 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…
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.
Can we stop modifying values when we keep mouse cursor on focused element and scroll mouse wheel ? If yes, please provide solution.
This really works…
I found that increasing
line-height
value makes the arrow buttons larger, while simplyheight
attribute keeps the box itself the desired size:Thanks!
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)
Great!
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
Use jQuery to disable the scroll wheel:
DON’T blur it, just prevent the event. loosing focus on mousewheel is a bas experience.
that is to say, a bad experience
Why would you blur the input? How annoying for the user. Just prevent the event firing.
how do the same in reverse order: -webkit-textfield-decoration-container set to read-only but buttons set to enabled ?
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. :(Hi,
Did u find any solution to this? How to prevent using angular JS? Let me know if any?
Thanks,
Rocky
You can write a directive like that:
Is there a solution for firefox 29?
Okay, here is the solution for firefox 29:
input[type=number] {
-moz-appearance: textfield;
}
Thank you, I have been looking for a possible way without using javascript and for firefox
Nice fix!
But this defeats the purpose of limiting input to numbers lol.
Great! Thanks.
Thanks for the FF 29 solution.
Ahhh nice! Thanks for the fix in FF 29 @Stephan! That’s perfect!
nice indeed stephan. thanks man!
Is there a way to have number inputs with and without spinners?
I’m trying to tag certain inputs with a class name.
@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.
Thanks. Really helped alot and it works perfectly
Thanks. works perfect (y)
@Pavel
Thanks that worked!
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
This does NOT work on Opera Mobile, it insists in showing the annoying spinner buttons.
It’s annoying that you’re considering Opera Mobile at all.
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!
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.
Beautiful Thanks.
Thanks Simon! Nice one.
One more thing, can’t we style those spinners? Like having a bigger height and width?
i used padding to make it bigger.
@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?
@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.
Here’s a solution that works for Firefox and other -moz based browsers:
@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….
and ::-webkit-inner-spin-button does’t exist in choice for css ….
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.
It does not work on firefox. Any ideas about that?
cool!!
does not work in FF 38.0.6 on a PC
What if you want to show always the increment not on hover?
I believe you are referring to chrome behavior? I would also like to make the spinners always visible but have not found a way.
Any pointer to how I assign this to a specific number id=”mynumberfield” would be super!
Try
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
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………..
firefox is not working webkit appearance
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
This post should be updated to
oops…
in my Chrome v51 the -webkit-appearance:none; seems to not work anymore. I have instead used -webkit-appearance:textfield;
Some time i need this spiner is there any way i can create a class of this code please help
Working with Firefox :
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.
Thanks a lot. This is very helpful. :)
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
It is not working in Mozilla
Note that the text says this snippet is for WebKit browsers. Firefox would require a different solution.
It worked like a pro, thank you so much.
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:
to make it work
credit: https://stackoverflow.com/a/23374725/861615
for firefox
Excellent! but only works on chrome, is there any way to do it in mozilla?
For disabling scroll option for chrome and firefox you can use below js code:
$(‘:input[type=number]’).on(‘wheel’, function (e) { $(this).blur(); });
Does not work on Firefox (69.0 (64-bit))
For Firefox you need to add:
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
$(document).on(“wheel”, “input[type=number]”, function (e) {
$(this).blur();
});
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.
/* 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;
}