How to hide the arrows in a number input?

Chromium browsers and Safari draw the arrows as pseudo-elements that you can hide. Firefox hides them when you switch the input's appearance to a plain text field. You need both parts:

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

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

The selectors are scoped to input[type="number"], so no other inputs are affected. If you only want this on some fields, add a class, like input[type="number"].quantity. The margin: 0 removes a small margin that some WebKit versions keep around the hidden buttons.

The value can still change

Hiding the arrows doesn't change how the input works. Arrow Up and Arrow Down on the keyboard still step the value, and in some browsers so does the mouse wheel over a focused input. min, max and step still apply too. That's fine, and useful for keyboard users, when the field is a quantity. If it's a problem for your field, the value probably isn't a number.

Often the better fix: a text input with inputmode

People often use type="number" to get the number keyboard on phones, then hide the arrows because they look wrong on a card number or a PIN. Those values are strings of digits, not quantities, and type="number" treats them as numbers:

• A leading zero is lost as soon as you use the value as a number. valueAsNumber for 02134 is 2134.
• Browsers let people type e, + and -, because they can be part of a number like 1e5 or -3.
• A value the browser can't read as a number, like 4242 4242 with a space, makes input.value an empty string.

For these, use a text input with inputmode="numeric". Phones still show the number keyboard, and the value stays exactly what the user typed:

<label for="code">Verification code</label>
<input
  id="code"
  name="code"
  type="text"
  inputmode="numeric"
  pattern="[0-9]{6}"
  maxlength="6"
  autocomplete="one-time-code"
  required
>

inputmode only changes the on-screen keyboard. It doesn't stop anyone from typing letters on a physical keyboard, so add a pattern. With the one above, the form won't submit unless the value is exactly six digits, and JavaScript can check input.validity.patternMismatch. Validate on the server as well.

Which input to use

• Quantities, ages, anything you'd count or step through: type="number", with the arrows hidden if you don't like them.
• Card numbers, PINs, verification codes and account numbers: type="text" inputmode="numeric" with a pattern and the matching autocomplete value, such as cc-number or one-time-code.
• Phone numbers: type="tel", which shows a phone keypad and accepts +, spaces and brackets.