Can I hide the HTML5 number input s spin box

Question

Is there a consistent way across browsers to hide the new spin boxes that some browsers  such as Chrome  render for HTML input of type number   I am looking for a CSS or JavaScript method to prevent the up down arrows from appearing    lt input id  test  type  number  gt

User · Answer

On Firefox for Ubuntu  just using      input type  number         -moz-appearance textfield      did the trick for me   Adding  input  -webkit-outer-spin-button  input  -webkit-inner-spin-button       -webkit-appearance  none      Would lead me to     Unknown pseudo-class or pseudo-element    -webkit-outer-spin-button        Ruleset ignored due to bad selector    everytime I tried  Same for the inner spin button

User · Answer

x000D   x000D  input type number   -webkit-inner-spin-button   x000D  input type number   -webkit-outer-spin-button   x000D       -webkit-appearance  none  x000D   lt input id  test  type  number  gt  x000D   x000D   x000D

User · Answer

This like your css code  input type  quot number quot    -webkit-outer-spin-button  input type  quot number quot    -webkit-inner-spin-button     -webkit-appearance  none    margin  0

User · Answer

Maybe change the number input with javascript to text input when you don t want a spinner   document getElementById  myinput   type    text     and stop the user entering text     document getElementById  myinput   onkeydown   function e      if    e keyCode  gt  95  amp  amp  e keyCode  lt  106          e keyCode  gt  47  amp  amp  e keyCode  lt  58          e keyCode    8        e keyCode    9               return false                then have the javascript change it back in case you do want a spinner   document getElementById  myinput   type    number     it worked well for my purposes

User · Answer

I ve encountered this problem with a input type  datetime-local    which is similar to this problem   And I ve found a way to overcome this kind of problems   First  you must turn on chrome s shadow-root feature by  DevTools -  Settings -  General -  Elements -  Show user agent shadow DOM   Then you can see all shadowed DOM elements  for example  for  lt input type  number  gt   the full element with shadowed DOM is    x000D   x000D   lt input type  number  gt  x000D     lt div id  text-field-container  pseudo  -webkit-textfield-decoration-container  gt  x000D       lt div id  editing-view-port  gt  x000D         lt div id  inner-editor  gt  lt  div gt  x000D       lt  div gt  x000D       lt div pseudo  -webkit-inner-spin-button  id  spin  gt  lt  div gt  x000D     lt  div gt  x000D   lt  input gt  x000D   x000D   x000D      And according to these info  you can draft some CSS to hide unwanted elements  just as  Josh said

User · Answer

Not what you asked for  but I do this because of a focus bug in WebKit with spinboxes      temporary fix for focus bug with webkit input type number ui if  navigator userAgent indexOf  AppleWebKit    gt  -1  amp  amp  navigator userAgent indexOf  Mobile      -1        var els   document querySelectorAll  input type number         for  var el in els          el type    text       It might give you an idea to help with what you need

User · Answer

According to Apple   s user experience coding guide for mobile Safari  you can use the following to display a numeric keyboard in the iPhone browser      lt input type  text  pattern   0-9      gt    A pattern of  d  will also work

User · Answer

In WebKit and Blink-based browsers  amp  All Kind Of Browser  use the following CSS       Disable Number Arrow    input type number   -webkit-inner-spin-button   input type number   -webkit-outer-spin-button      -webkit-appearance  none     margin  0

User · Answer

Short answer   x000D   x000D  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    x000D   lt input type  number    gt  x000D   x000D   x000D   Longer answer  To add to existing answer    Firefox  In current versions of Firefox  the  user agent  default value of the -moz-appearance property on these elements is number-input  Changing that to the value textfield effectively removes the spinner  input type  quot number quot         -moz-appearance  textfield     In some cases  you may want the spinner to be hidden initially  and then appear on hover focus   This is currently the default behavior in Chrome   If so  you can use the following   x000D   x000D  input type  number         -moz-appearance  textfield    input type  number   hover  input type  number   focus       -moz-appearance  number-input    x000D   lt input type  number   gt  x000D   x000D   x000D    Chrome  In current versions of Chrome  the  user agent  default value of the -webkit-appearance property on these elements is already textfield  In order to remove the spinner  the -webkit-appearance property s value needs to be changed to none on the   -webkit-outer-spin-button   -webkit-inner-spin-button pseudo classes  it is -webkit-appearance  inner-spin-button by default    x000D   x000D  input type  number    -webkit-outer-spin-button  input type  number    -webkit-inner-spin-button       -webkit-appearance  none      margin  0    x000D   lt input type  number    gt  x000D   x000D   x000D   It s worth pointing out that margin  0 is used to remove the margin in older versions of Chrome  Currently  as of writing this  here is the default user agent styling on the  inner-spin-button  pseudo class  input  -webkit-inner-spin-button       -webkit-appearance  inner-spin-button      display  inline-block      cursor  default      flex  0 0 auto      align-self  stretch      -webkit-user-select  none      opacity  0      pointer-events  none      -webkit-user-modify  read-only

User · Answer

This CSS effectively hides the spin-button for webkit browsers  have tested it in Chrome 7 0 517 44 and Safari Version 5 0 2  6533 18 5      x000D   x000D  input  -webkit-outer-spin-button  x000D  input  -webkit-inner-spin-button   x000D         display  none   lt - Crashes Chrome on hover    x000D      -webkit-appearance  none  x000D      margin  0      lt -- Apparently some margin are still there even though it s hidden    x000D    x000D   x000D  input type number    x000D      -moz-appearance textfield     Firefox    x000D    x000D   lt input type  number  step  0 01    gt  x000D   x000D   x000D    You can always use the inspector  webkit  possibly Firebug for Firefox  to look for matched CSS properties for the elements you are interested in  look for Pseudo elements  This image shows results for an input element type  number

User · Answer

This is more better answer i would like to suggest on mouse over and without mouse over  input type  number       appearance  textfield    input type  number    -webkit-inner-spin-button  input type  number    -webkit-outer-spin-button  input type  number   hover  -webkit-inner-spin-button   input type  number   hover  -webkit-outer-spin-button   -webkit-appearance  none    margin  0

User · Answer

To make this work in Safari I found adding  important to the webkit adjustment forces the spin button to be hidden   input  -webkit-outer-spin-button  input  -webkit-inner-spin-button          display  none   lt - Crashes Chrome on hover        -webkit-appearance  none  important      margin  0      lt -- Apparently some margin are still there even though it s hidden        I am still having trouble working out a solution for Opera as well

User · Answer

Try using input type  tel  instead  It pops up a keyboard with numbers  and it doesn   t show spin boxes  It requires no JavaScript or CSS or plugins or anything else

User · Answer

Firefox 29 currently adds support for number elements  so here s a snippet for hiding the spinners in webkit and moz based browsers    x000D   x000D  input type  number     x000D      -moz-appearance textfield  x000D    x000D   x000D  input  -webkit-outer-spin-button  x000D  input  -webkit-inner-spin-button   x000D      -webkit-appearance  none  x000D    x000D   lt input id  test  type  number  gt  x000D   x000D   x000D

User · Answer

I needed this to work     Chrome  Safari  Edge  Opera    input type number   -webkit-outer-spin-button  input type number   -webkit-inner-spin-button   -webkit-appearance  none   appearance  none   margin  0     Firefox    input type number    -moz-appearance  textfield   The extra line of appearance  none was key to me

User · Answer

I found a super simple solution using    lt input type  text  inputmode  numeric    gt    This is supported is most browsers  https   developer mozilla org en-US docs Web HTML Global attributes inputmode

User · Answer

Only add this css to remove spinner on input of number     For Firefox     input type  number         -moz-appearance textfield          Webkit browsers like Safari and Chrome     input type number   -webkit-inner-spin-button  input type number   -webkit-outer-spin-button       -webkit-appearance  none      margin  0

[javascript] Can I hide the HTML5 number input’s spin box?

Examples related to javascript

Examples related to css

Examples related to html

Examples related to input

Examples related to numbers