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.

To hide the arrow buttons in Chrome and other WebKit/Blink browsers, you need to target the ::-webkit-outer-spin-button and ::-webkit-inner-spin-button pseudo-elements and set the display property to “none”.

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

CSS HTML5 number input’s arrow buttons

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

Try it Yourself »

Info

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:

css HTML5 number input’s arrow buttons

<!DOCTYPE html>
<html>
  <head>
    <style>
      input::-webkit-outer-spin-button,
      input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        appearance: none;
        margin: 0;
      }
      input[type=number] {
        -moz-appearance: textfield;
        appearance: textfield;
        /* Firefox */
      }
    </style>
  </head>
  <body>
    <input type="number" />
  </body>
</html>

Try it Yourself »

Tip

Setting the margin to 0 removes the extra spacing left by the removed spinner in older Chrome versions.

In Firefox versions, the default value of the -moz-appearance property on these elements is <kbd class="highlighted">number-input</kbd>. Changing it to the value <kbd class="highlighted">textfield</kbd> removes the spinner.

If you want the spinner to be hidden initially, but appear on hover or focus, you can use the following approach:

Example of hiding the arrow button from the number input:

css HTML5 number input’s arrow buttons

<!DOCTYPE html>
<html>
  <head>
    <style>
      input[type="number"] {
        -moz-appearance: textfield;
        appearance: textfield;
      }
      input[type="number"]::-webkit-outer-spin-button,
      input[type="number"]::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
      input[type="number"]:hover,
      input[type="number"]:focus {
        -moz-appearance: number-input;
        appearance: number-input;
      }
      input[type="number"]:hover::-webkit-outer-spin-button,
      input[type="number"]:hover::-webkit-inner-spin-button,
      input[type="number"]:focus::-webkit-outer-spin-button,
      input[type="number"]:focus::-webkit-inner-spin-button {
        -webkit-appearance: inner-spin-button;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <input type="number" />
  </body>
</html>

Try it Yourself »

The display and appearance properties

The display property defines the type of the box used for an HTML element. The <kbd class="highlighted">none</kbd> 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.