Input Type Number on Firefox: Hiding the Spinner

Firefox 29 introduced support for input fields with type = number.

This has been in Chrome for a long time. Other webkit browsers like mobile safari also support it. It’s fantastic on iOS devices as the numeric keyboard appears when the user taps into the field.

However on some desktop browsers*, number fields will display an up and down spinner control inside the field.

Up until now, this didn’t appear in Firefox, but suddenly it’s there!

spinner

After some digging around, here’s what you need to do to hide the spinner. Your input fields will be back to normal.

no-spinner

Firefox

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

Chrome

::-webkit-inner-spin-button { -webkit-appearance: none;}
::-webkit-outer-spin-button { -webkit-appearance: none;}

*Internet Explorer (version 10 and 11) do support the number field, but do not display the increment and decrement buttons.

Hi, I'm James, and for the last decade I've made a living by making my own blogs and websites.
Updated: September 15, 2016

12 Comments

  1. very good

  2. Thx!

  3. Thank you so much.

  4. For firefox it will become textfield.
    I dont want that. I want a number field only. What to do..

  5. how to hide in IE 9 and above versions??

  6. how to set input[type=number] inner-spin and outer-spin background by css

  7. Cool. That’s better than using input type=”tel” to avoid the spinner for desktop and still having the right keyboard for mobiles.

    • It’s totally worth using number inputs for mobile. Showing the right keyboard provides a far better UX. Firefox has not supported these ever… until now. So if you’re used to developing on Chrome, you’re not going to notice this. What I don’t get is why they don’t inhibit alpha characters automatically for these controls. Would make validation easier.

      • And as I know, IE11 doesn’t show the spinner even if the type of the input is number, but when the touch keyboard is on, it would correspondingly show the number keyboard instead of the normal one. (However I am not quite sure about Windows Phone.)

        • Thanks for the info. It’s always hard to check all versions of all browsers.

Add a Comment