How to Hide the HTML5 Number Input’s Arrow Buttons

Solutions with CSS properties

If you want to hide arrow buttons of the HTML <input> element with the “number” type, you need to use CSS.

As there is no longer a problem in Chrome, you can only set the display property to “none” to hide the arrow buttons.

Example of hiding the arrow button with the CSS display property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        display: none;
      }
    </style>
  </head>
  <body>
    <input type="number" />
  </body>
</html>
Note that it is still possible to change the number when scrolling inside the number input.

There is another method using the appearance property.

Example of hiding the arrow button with the CSS appearance property:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      input[type=number] {
        -moz-appearance: textfield;
        /* Firefox */
      }
    </style>
  </head>
  <body>
    <input type="number" />
  </body>
</html>
Setting the margin to 0 removes the margin in older versions of Chrome.

In Firefox versions, the default value of the -moz-appearance property on these elements is number-input. Changing it to the value textfield removes the spinner.

And if you want the spinner to be hidden initially, and then appear on hover or focus.

Example of hiding the arrow button from the number input:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type="number"] {
        -moz-appearance: textfield;
      }
      input[type="number"]:hover,
      input[type="number"]:focus {
        -moz-appearance: number-input;
      }
    </style>
  </head>
  <body>
    <input type="number" />
  </body>
</html>

The display and appearance properties

The display property defines the type of the box used for an HTML element. The none value specifies that the element should not be displayed at all.

The appearance property displays an element using a platform-native styling based on the users' operating system's theme. The -moz-appearance property is used in Firefox. The -webkit-appearance property is designed to work on browsers powered by the WebKit, such as Safari and Chrome.