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, Apr 29 '14 at 18:51
maybe this help you: http://css-tricks.com/snippets/css/turn-off-number-input-spinners/ — Black Sheep, Apr 29 '14 at 18:53
I don't can change the type, because i have some scripts where I use jquery selector input[type=number]. — NereuJunior, Apr 29 '14 at 19:09
-webkit-inner-spin-button -webkit-outer-spin-button with -webkit-appearance: none; margin: 0; Dont Work in Firefox. — NereuJunior, Apr 29 '14 at 19:13
@RocketHazmat: `type="number"` is required for mobile browsers to show the numeric keyboard instead of the full keyboard. — CodeManX, Aug 16 '15 at 12:59
Changing `type="text"` is a bad idea because touch devices will show the wrong keyboard. — WhyNotHugo, Feb 28 '16 at 08:01
setting `type="text"` is a bad idea, you will have to make sure you enter only numeric characters and also you will have to use separate validation if you want to make use of the `min` or `max` attributes — Pankaja Gamage, Jun 02 '17 at 10:09
Possible duplicate of [Can I hide the HTML5 number input’s spin box?](https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box) — Mikael Dúi Bolinder, Feb 11 '19 at 13:03

score 617 · Accepted Answer · edited Dec 31 '18 at 17:09

617

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 '18 at 17:09

rubo77

19,527
31
134
226

answered Apr 29 '14 at 20:33

Richard Deeming

29,830
10
79
151

1

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 Nov 21 '14 at 03:51
5

Some more useful information from Geoff Graham: [Numeric Inputs – A Comparison of Browser Defaults](https://css-tricks.com/numeric-inputs-a-comparison-of-browser-defaults/) – Richard Deeming Mar 25 '15 at 19:58
how we can remove from IE ? – Bhupinder kumar Jan 09 '17 at 04:15
@Bhupinderkumar: As far as I can see, neither IE11 nor Edge display spinner buttons on numeric inputs. – Richard Deeming Jan 10 '17 at 12:33
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 Oct 13 '17 at 17:09
2

@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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number). Chrome prevents non-numeric input in both examples. – Richard Deeming Oct 16 '17 at 09:54
@alxndr: The question was about Firefox, not Chrome. The Chrome part was added later by Jan-Terje Sørensen. But thanks for the down-vote anyway. – Richard Deeming Apr 20 '18 at 10:43
1

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

score 60 · Answer 2 · answered Jan 01 '15 at 01:16

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, Mar 27 '23 at 20:39

score 11 · Answer 3 · answered Jan 09 '18 at 07:23

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.

score 7 · Answer 4 · answered Mar 30 '17 at 10:41

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

score 4 · Answer 5 · answered May 20 '14 at 03:30

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">

score 3 · Answer 6 · answered Mar 11 '20 at 14:15

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 '20 at 14:15

Yahel Yechieli

1,479
2
9
4

score 3 · Answer 7 · answered Nov 24 '21 at 00:42

3

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 '21 at 00:42

Exis

63
7

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 Feb 13 '23 at 17:56

score 1 · Answer 8 · answered Jun 27 '19 at 11:47

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 '19 at 11:47

Darex1991

855
1
10
24

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 Jun 27 '22 at 07:56

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

8 Answers8

Linked