Hide Spinner in Input Number - Firefox 29

Question

On Firefox 28  I m using  lt input type  number  gt  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

User · Answer

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

User · Answer

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

User · Answer

According to this blog post  you need to set -moz-appearance textfield  on the input  x000D   x000D  input type number   -webkit-outer-spin-button  x000D  input type number   -webkit-inner-spin-button   x000D      -webkit-appearance  none  x000D      margin  0  x000D    x000D   x000D  input type number    x000D      -moz-appearance textfield  x000D    x000D   lt input type  number  step  0 01   gt  x000D   x000D   x000D

User · Answer

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    x000D   x000D  input type  number     x000D      -moz-appearance  textfield  x000D    x000D  input type  number   hover  x000D  input type  number   focus   x000D      -moz-appearance  number-input  x000D    x000D   lt input type  number   gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

In SASS SCSS style  you can write like this   input type  number       -moz-appearance  textfield   For FireFox       amp   -webkit-inner-spin-button     For Webkits like Chrome and Safari       -webkit-appearance  none      margin  0          Definitely this code style can use in PostCSS

User · Answer

I mixed few answers from answers above and from How to remove the arrows from input type  quot number quot   in Opera in scss   input type number       amp      amp   -webkit-inner-spin-button     amp   -webkit-outer-spin-button       -webkit-appearance  none      -moz-appearance  textfield      appearance  none        amp  hover       amp  focus         -moz-appearance  number-input               Tested on chrome  firefox  safari

[css] Hide Spinner in Input Number - Firefox 29

Examples related to css

Examples related to firefox

Examples related to input

Examples related to spinner