Hide Up & Down Arrow Buttons (Spinner) in Input Number - Firefox 29

Question

On Firefox 28, I'm using <input type="number"> works great because it brings up the numerical keyboard on input fields which should only contain numbers.

In Firefox 29, using number inputs displays spin buttons at the right side of the field, which looks like crap in my design. I really don't need the buttons, because they are useless when you need to write something like a 6~10 digit number anyway.

Is it possible to disable this with CSS or jQuery?

If you don't want the spin arrows, then don't use type="number". You can use type="text" and the pattern attribute to set a regex to make sure it's a number. — gen_Eric, Commented Apr 29, 2014 at 18:51
-webkit-inner-spin-button -webkit-outer-spin-button with -webkit-appearance: none; margin: 0; Dont Work in Firefox. — NereuJunior, Commented Apr 29, 2014 at 19:13
@RocketHazmat: type="number" is required for mobile browsers to show the numeric keyboard instead of the full keyboard. — CodeManX, Commented Aug 16, 2015 at 12:59
<input type="tel"> it's only numbers and it doesn't include spinners. — TomasVeras, Commented Oct 2, 2015 at 20:00
Changing type="text" is a bad idea because touch devices will show the wrong keyboard. — WhyNotHugo, Commented Feb 28, 2016 at 8:01

rubo77 · Accepted Answer · 2018-12-31 17:09:19Z

625

According to this blog post, you need to set -moz-appearance:textfield; on the input.

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

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

<input type="number" step="0.01"/>

edited Dec 31, 2018 at 17:09

rubo77

20.3k33 gold badges139 silver badges235 bronze badges

answered Apr 29, 2014 at 20:33

Richard Deeming

30.5k10 gold badges83 silver badges159 bronze badges

2

I wrapped this in @-moz-document url-prefix() { ... } and it does what I want: hides the spinners in Firefox, where they look bad, but keep them alive in other browsers, including ones that bring up the numeric keyboard as the OP mentioned.
– Michael Scheper
Commented Nov 21, 2014 at 3:51
5

Some more useful information from Geoff Graham: Numeric Inputs – A Comparison of Browser Defaults
– Richard Deeming
Commented Mar 25, 2015 at 19:58
5

this works and indeed it removes the spinners, but then you are now able to enter alphanumeric characters into it. Hope somebody finds a way to handle that scenario without having to check the entered keys if they are numbers or not.
– Jovanni G
Commented Oct 13, 2017 at 17:09
3

@JovanniG: Even if you don't remove the spinners, you can still enter non-numeric characters into the input in Firefox. Try it with the demo on MDN. Chrome prevents non-numeric input in both examples.
– Richard Deeming
Commented Oct 16, 2017 at 9:54
1

@alxndr: Also, I've just tried the "Run code snippet" in Chrome 66, and it works as expected.
– Richard Deeming
Commented Apr 20, 2018 at 10:44

| Show 3 more comments

Josh Crozier · Accepted Answer · 2015-01-01 01:16:58Z

It's worth pointing out that the default value of -moz-appearance on these elements is number-input in Firefox.

If you want to hide the spinner by default, you can set -moz-appearance: textfield initially, and if you want the spinner to appear on :hover/:focus, you can overwrite the previous styling with -moz-appearance: number-input.

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

I thought someone might find that helpful since I recently had to do this in attempts to improve consistency between Chrome/FF (since this is the way number inputs behave by default in Chrome).

If you want to see all the available values for -moz-appearance, you can find them here (mdn).

moz-appearance: number-input; didn't work for me, but I just used "auto" instead. — Aardvark, Commented Mar 27, 2023 at 20:39

AmerllicA · Accepted Answer · 2018-01-09 07:23:59Z

13

In SASS/SCSS style, you can write like this:

input[type='number'] {
  -moz-appearance: textfield;/*For FireFox*/

  &::-webkit-inner-spin-button { /*For Webkits like Chrome and Safari*/
    -webkit-appearance: none;
    margin: 0;
  }
}

Definitely this code style can use in PostCSS.

answered Jan 9, 2018 at 7:23

AmerllicA

31.6k17 gold badges141 silver badges166 bronze badges

Add a comment |

navin prakash · Accepted Answer · 2017-03-30 10:41:49Z

7

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


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

answered Mar 30, 2017 at 10:41

navin prakash

711 silver badge4 bronze badges

Add a comment |

Abhijeet · Accepted Answer · 2014-05-20 03:30:37Z

Faced the same issue post Firefox update to 29.0.1, this is also listed out here https://bugzilla.mozilla.org/show_bug.cgi?id=947728

Solutions: They(Mozilla guys) have fixed this by introducing support for "-moz-appearance" for <input type="number">. You just need to have a style associated with your input field with "-moz-appearance:textfield;".

I prefer the CSS way E.g.:-

.input-mini{
-moz-appearance:textfield;}

Or

You can do it inline as well:

<input type="number" style="-moz-appearance: textfield">

Exis · Accepted Answer · 2021-11-24 00:42:57Z

4

In 2021, there is a much better solution to make your firefox like Google Chrome. You should use focus and hover, too.

input[type="number"] {
    appearance: none; /* textfield also works! */
}

input[type="number"]:focus, 
input[type="number"]:hover {
    appearance: auto;
}

for more information, please read the documentation

answered Nov 24, 2021 at 0:42

Exis

937 bronze badges

1

This solution finally worked for me. Specifically the appearance: auto;. I also wanted to mention that appearance: none; no longer works, but textfield does.
– GeorgeCiesinski
Commented Feb 13, 2023 at 17:56
This is good, it's a bit annoying how if the text is centered, it jumps to the left when the spinners are shown. It would be better if the spinners were there but just invisible
– Raj
Commented Jun 14 at 14:21

Add a comment |

Yahel Yechieli · Accepted Answer · 2020-03-11 14:15:41Z

3

This worked for me:

    input[type='number'] {
    appearance: none;
}

Solved in Firefox, Safari, Chrome. Also, -moz-appearance: textfield; is not supported anymore (https://developer.mozilla.org/en-US/docs/Web/CSS/appearance)

answered Mar 11, 2020 at 14:15

Yahel Yechieli

1,5892 gold badges9 silver badges4 bronze badges

Add a comment |

Darex1991 · Accepted Answer · 2019-06-27 11:47:26Z

1

I mixed few answers from answers above and from How to remove the arrows from input[type="number"] in Opera in scss:

input[type=number] {
  &,
  &::-webkit-inner-spin-button,
  &::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: textfield;
    appearance: none;

    &:hover,
    &:focus {
      -moz-appearance: number-input;
    }
  }
}

Tested on chrome, firefox, safari

answered Jun 27, 2019 at 11:47

Darex1991

8571 gold badge10 silver badges27 bronze badges

Maybe you can move the browser prefix attributes like -moz- to last to prevent override by none prefix attributes. ``` { appearance: none; -webkit-appearance: none; -moz-appearance: textfield; } ```
– John Trump
Commented Jun 27, 2022 at 7:56

Add a comment |

Collectives™ on Stack Overflow

Hide Up & Down Arrow Buttons (Spinner) in Input Number - Firefox 29

8 Answers 8

Not the answer you're looking for? Browse other questions tagged
css
firefox
input
spinner
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Not the answer you're looking for? Browse other questions tagged cssfirefoxinputspinner or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
css
firefox
input
spinner
or ask your own question.