How to Remove the Arrows From a Number Input (CSS, Tailwind, React)

The copy-paste CSS fix

An input type="number" shows small up and down arrows (the spin buttons) in desktop browsers. Chrome, Edge and Safari draw them with two pseudo-elements. Firefox draws them as part of the input. So you need two rules:

/* Chrome, Edge, Safari, Opera */
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;
}

margin: 0 matters: in some versions of Chrome the hidden button still keeps a small margin, which leaves a gap on the right of the field. appearance: textfield tells Firefox to draw the input like a normal text box, without the spinner. The -moz- line is for older Firefox versions that don't support the unprefixed property.

Here is a full form you can paste into any page. It posts to splitforms, so you get the submissions by email and in your dashboard without writing a backend:

<form action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />

  <label for="qty">Quantity</label>
  <input id="qty" name="quantity" type="number" min="1" max="20" step="1" required />

  <button type="submit">Send</button>
</form>

<style>
  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;
    appearance: textfield;
  }
</style>

Get a free access key to try it.

Tailwind: arbitrary variants

Tailwind has no built-in class for the spin buttons, but arbitrary properties and variants cover it. Put these three classes on the input:

<input
  type="number"
  name="quantity"
  className="[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
/>

[appearance:textfield] is the Firefox rule. The two [&::-webkit-...] variants target the pseudo-elements and set appearance: none on them. In plain HTML use class instead of className. If you hide the arrows on every number field in the project, add the CSS rules from above to your global stylesheet once instead of repeating the classes.

React

In React the CSS is the same. Either import a stylesheet with the rules above, or use the Tailwind classes. The value you read from e.target.value is still a string, so convert it with Number() or e.target.valueAsNumber:

function Quantity() {
  const [qty, setQty] = useState("1");

  return (
    <input
      type="number"
      min={1}
      max={20}
      value={qty}
      onChange={(e) => setQty(e.target.value)}
      className="[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
    />
  );
}

Hide the arrows on one field only

The global rule removes the spinner from every number input on the page. To keep it on most fields and hide it on one, scope the rules to a class:

.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spinner {
  -moz-appearance: textfield;
  appearance: textfield;
}

<input type="number" name="age" class="no-spinner" />
<input type="number" name="guests" /> <!-- keeps its arrows -->

Stop the scroll wheel changing the value

Hiding the arrows does not stop the other surprise: in some browsers, scrolling the mouse wheel over a focused number input changes its value. A user scrolls down the page and their quantity goes from 3 to -2 without them noticing. The simplest fix is to take focus away when the wheel moves:

document.querySelectorAll('input[type=number]').forEach((input) => {
  input.addEventListener('wheel', (e) => e.currentTarget.blur());
});

The page keeps scrolling and the value stays the same. If you want the field to keep focus, cancel the wheel event only while it is focused. The listener must be non-passive for preventDefault() to work:

input.addEventListener('wheel', (e) => {
  if (document.activeElement === e.currentTarget) e.preventDefault();
}, { passive: false });

In React, onWheel is attached as a passive listener, so preventDefault() there does nothing. Use onWheel={(e) => e.currentTarget.blur()}, or add the non-passive listener yourself in a useEffect with a ref.

When not to use type="number" at all

Often the real fix is a different input type. type="number" is meant for quantities you could add or subtract: an amount, an age, a number of guests. For digits that are really an identifier it causes problems:

• Leading zeros are lost. A ZIP code like 02134 or a code like 0071 can become 2134 or 71.
• Other characters are allowed. The browser accepts e, +, - and ., because 1e5 is a valid number.
• Long numbers break. Card numbers are too long to be stored exactly as a JavaScript number.
• The spinner makes no sense. Nobody steps a phone number up by one.

For phone numbers, ZIP codes, card numbers, PINs and one-time codes, use a text input with inputmode and pattern:

<input type="text" name="zip" inputmode="numeric" pattern="[0-9]*"
       autocomplete="postal-code" />

inputmode="numeric" opens the number keypad on phones, pattern makes the browser reject anything that isn't digits on submit, and there is no spinner to hide. For a stricter ZIP pattern (5 digits or ZIP+4), test one in the ZIP code regex tester.

min, max and step still work

Removing the arrows only changes how the field looks. Validation is untouched: with min="1" max="20", a value of 25 still blocks the form with the browser's "Value must be less than or equal to 20" message. step still applies too: with step="1", 2.5 is rejected, and with step="0.01" you can accept prices with cents.

<input type="number" name="price" min="0" step="0.01" required />

Always check the value on the server as well. Anyone can send a form request without a browser, so client-side limits are a help for users, not a guarantee.

Accessibility: the keyboard still steps the value

The arrow keys still work after the spin buttons are hidden. With the field focused, Up and Down change the value by one step, and screen readers still announce the field as a spin button with its current value, min and max. That is usually what you want, because keyboard users lose nothing.

The flip side is that mouse users lose the visible hint that the value can be stepped. If stepping matters (a quantity picker in a cart, for example), replace the spinner with clear minus and plus buttons that have accessible labels, such as aria-label="Decrease quantity", and call input.stepDown() and input.stepUp() from them. Those methods respect min, max and step for you.

FAQ

References: MDN: input type="number" and MDN: appearance.