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

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:

<input type="text" pattern="[0-9]*" />

A pattern of \d* will also work.

I found a super simple solution using

<input type="text" inputmode="numeric" />

This is supported in most browsers:

• https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

• https://caniuse.com/input-inputmode

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

If you are trying to hide controls the browser adds, it should be a hint that you are misusing that input type.

Standard Conformance Issues

From the HTML spec on type=number:

The type=number state is not appropriate for input that happens to only consist of numbers but isn't strictly speaking a number. For example, it would be inappropriate for credit card numbers or US postal codes.

(Emphasis is mine)

Usability Issues

The <input type=number> was found to be problematic during a usability study performed by the GOV.UK team. This team maintains one of the world's best known design systems and concludes that this input type:

• cannot be dictated or selected when using Dragon Naturally Speaking
• appears as unlabeled in NVDA's element list
• appears as a spin button in NVDA's object navigation, which has an edit field and two buttons inside - those buttons are unlabeled, but decrease/increase the value
• is reported as unlabeled edit field when using nvda+tab

Alternative Solution

Instead, they recommend to use <input type="text" inputmode="numeric" pattern="[0-9]*"> which comes down to the combined answers of @team_steve and @youjin. This not only hides the spin boxes, it also improves the overall usability of the element.

It comes without saying that additional validation needs to be done, along with a helpful error text.

<label>Postal Code
<input type="text" inputmode="numeric" pattern="[0-9]*" size="5">
</label>

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Source

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

In WebKit and Blink-based browsers & 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; 
}

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 > 95 && e.keyCode < 106)
    || (e.keyCode > 47 && e.keyCode < 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

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.

For me on chrome nothing has worked but display: none.

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
  display: none;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

Credits to @philfreo for pointing it out in the comments.

This like your css code:

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}