Firefox 29 has recently added support for number elements, which means you can now hide spinners in webkit and moz based browsers with this code snippet:

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

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

<input id="test" type="number">

Summary:

Styling to Remove Number Input Spinner in Web Browsers

<input type="number" />

Expanding on the Solution:

To further enhance the initial solution...

Firefox Behavior:

For Firefox browsers, the default styling for number input fields can be modified by changing the -moz-appearance property to 'textfield', effectively hiding the spinner.

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

In certain scenarios, you may wish to initially hide the spinner and only display it upon hover/focus. In such cases, the following CSS rules can be implemented:

Enhanced Styling for Number Input Field on Hover/Focus

<input type="number"/>

Chrome Behavior:

In Chrome browsers, the default styling can be altered by modifying the -webkit-appearance property to 'none' within the pseudo classes affecting the spinner appearance.

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

<input type="number" />

Note that setting margin: 0 is used specifically to eliminate the margin in previous versions of Chrome.

The default user agent styling for the 'inner-spin-button' pseudo class in Chrome is as follows:

User Agent Styling for 'inner-spin-button'

As stated in Apple's coding guide for optimal user experience on mobile Safari, a numeric keyboard can be displayed in the iPhone browser using the following code:

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

You can also achieve this by setting the pattern to \d*.

I recently discovered a remarkably easy solution using

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

This feature is widely supported across various browsers:

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

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

Consider utilizing the input type="tel" method as an alternative. This option displays a number keyboard without spin boxes, and does not necessitate any additional JavaScript, CSS, or plugins.

If you find yourself trying to conceal controls that the browser automatically adds, it may indicate you are not using the input type correctly.

Issues with Standard Conformance

The HTML specification on type=number states:

The type=number attribute is not suitable for inputs that only contain numbers but are not strictly numeric. Examples include credit card numbers or US postal codes.

(Emphasis added)

Challenges with Usability

A usability study by the GOV.UK team revealed issues with the <input type=number>, stating:

• Users cannot easily interact with it when using Dragon Naturally Speaking.
• It appears unlabeled in NVDA's element list.
• In NVDA's object navigation, it displays as a spin button with unlabeled buttons for changing values.
• When using nvda+tab, it shows as an unlabeled edit field.

Proposed Alternative Solution

Instead of <input type=number>, the recommendation is to use

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

Additional validation and informative error messages should be implemented alongside this approach.

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

To eliminate the spinner on number input, apply the following CSS:

/* Specifically for Firefox */

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



/* For Webkit browsers such as Safari and Chrome */

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

/* Custom CSS for hiding number input arrows on various browsers */

/* 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

I've come across a similar issue with an input[type="datetime-local"].

Fortunately, I have discovered a solution for resolving these types of problems.

Firstly, you need to enable Chrome's shadow-root feature by navigating to "DevTools -> Settings -> General -> Elements -> Show user agent shadow DOM".

Once activated, you will be able to view all shadowed DOM elements. For instance, the complete element with shadowed DOM for <input type="number"> looks like:

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

https://i.sstatic.net/wIu6b.png

Using this information, you can create CSS code to hide undesired elements, as recommended by @Josh.

In order to ensure that this functionality functions properly in Safari, I discovered that adding !important to the adjustments for webkit causes the spin button to be concealed.

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 */
}

However, I am still encountering difficulties trying to find a solution that works for Opera as well.

If you want to switch a number input to a text input without a spinner using JavaScript, try the following code:

document.getElementById('myinput').type = 'text';

To prevent users from entering text, use this code:

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

Lastly, if you decide you want a spinner back, revert the input type with the following code:

document.getElementById('myinput').type = 'number';

This method worked effectively for my specific needs.

This answer provides a more effective solution that can be implemented both 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; }

Although it's not precisely what you were looking for, I've included this workaround due to a focus issue 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 elements = document.querySelectorAll("input[type=number]");
    for (var element in elements)
        element.type = "text";
}

While not a perfect solution, it may provide some insight into addressing your requirements.

When using Firefox on Ubuntu, I found that simply utilizing the following CSS code worked for me:

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

However, when attempting to add the following CSS:

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

I kept encountering the message:

Unknown pseudo-class or pseudo-element ‘-webkit-outer-spin-button’. Ruleset ignored due to bad selector.

This occurred every time I tried, including with the inner spin button.

I really needed this solution to function properly

/* Specific CSS for different browsers */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

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

The inclusion of the extra line appearance: none was crucial for my success.

To ensure consistency across different browsers like WebKit and Blink, make use of the following CSS code:

/* Remove Number Arrow Display */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

My experience with chrome has been that only display: none has been effective.

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

Hats off to @philfreo for bringing this to our attention in the comments section.