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 Jav

Answer 1

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.

Answer 2

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.

Answer 3

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; <- Crashes Chrome on hover */
    -webkit-appearance: none !important;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

I am still having trouble working out a solution for Opera as well.

Answer 4

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

Answer 5

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.