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

Firefox 29 currently adds support for number elements, so here's a snippet for hiding the spinners in webkit and moz based browsers:

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

Short answer:

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

<input type="number" />

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="number"] {
    -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:

input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input;
}

<input type="number"/>

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).

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

<input type="number" />

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

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.

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 plugins.

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
//Supports Mozilla
input[type=number] {
    -moz-appearance:textfield;
}

<input type="number"/>

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 <input type="number">, the full element with shadowed DOM is:

<input type="number">
  <div id="text-field-container" pseudo="-webkit-textfield-decoration-container">
    <div id="editing-view-port">
      <div id="inner-editor"></div>
    </div>
    <div pseudo="-webkit-inner-spin-button" id="spin"></div>
  </div>
</input>

And according to these info, you can draft some CSS to hide unwanted elements, just as @Josh said.

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") > -1 && 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.

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

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.

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.

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