Introduction

Yes, you can usually hide the spinner controls on an input type="number" with CSS. The exact selectors differ by browser engine, so a practical cross-browser solution normally combines WebKit-specific pseudo-elements with an appearance reset for Firefox.

Hide the Spinner in Chromium and Safari

Browsers in the WebKit and Chromium family expose pseudo-elements for the inner and outer spin buttons. You can disable their visual appearance like this:

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

That is the common CSS snippet used in Chrome, Edge, and Safari.

Hide the Spinner in Firefox

Firefox does not use the same pseudo-elements for this control. The usual approach there is to change the input's appearance.

1input[type="number"] {
2  appearance: textfield;
3  -moz-appearance: textfield;
4}

That keeps the element as a numeric input while making it look more like a plain text field.

A Full Example

<label for="qty">Quantity</label>
<input id="qty" type="number" min="1" max="10" step="1" value="1">

1input[type="number"]::-webkit-inner-spin-button,
2input[type="number"]::-webkit-outer-spin-button {
3  -webkit-appearance: none;
4  margin: 0;
5}
6
7input[type="number"] {
8  appearance: textfield;
9  -moz-appearance: textfield;
10}

This keeps numeric validation, min and max rules, and mobile numeric keyboards while hiding the desktop spinner UI in many browsers.

Why This Is Only a Visual Change

Hiding the spinner does not turn the field into a plain text input. The control is still a number input, so browser validation, step behavior, and numeric keyboard behavior may still apply.

That distinction matters because the presentation can change while the semantics remain numeric.

Consider Accessibility and Usability

The spinner exists for a reason. It provides a built-in increment and decrement mechanism and can help some users interact with the field more easily.

If you hide it, think about the overall interaction:

• does keyboard entry still work well,
• do min, max, and step still match the product rules,
• do users need custom plus and minus buttons instead,
• does the field still feel like a numeric control on mobile and desktop.

Styling away the spinner is easy. Replacing its usability thoughtfully is harder.

When type="text" Might Be More Honest

If the control is really behaving like a text field with custom parsing and validation, then type="text" may be the more honest design. But that choice also gives up native numeric behavior, so it should be made deliberately rather than as a side effect of CSS styling.

That is why the first question is often not "can I hide the spinner," but "should this still be a number input at all."

Cross-Browser Testing Still Matters

Number inputs behave differently across browser engines and platforms. Even after the CSS is correct, it is worth testing the final field in the browsers and devices your product supports.

Desktop browsers, mobile browsers, and embedded web views do not always present the same numeric-entry affordances.

Common Pitfalls

A common mistake is hiding the spinner in one engine and assuming the same CSS works everywhere.

Another issue is removing the control without thinking about accessibility, keyboard usage, or touch interaction.

Developers also sometimes switch to type="text" unnecessarily and lose native numeric validation and input behavior.

Summary

• You can usually hide number-input spin boxes with CSS.
• Chromium and Safari use WebKit spin-button pseudo-elements.
• Firefox typically needs an appearance reset such as appearance: textfield.
• Hiding the spinner changes presentation, not the fact that the field is still numeric.
• Test the final experience across the browsers and devices your product supports.