Coding Triumph

Helpful code snippets & tutorials

How do you hide HTML input number arrows

The browser adds two little arrows to the number input called spinners. I personally find them annoying, and if you are like me and want to get rid of them, keep reading!

This is the default input number. Hover over it to see the spinners:
And this is the same input number with the spinners turned off:

So how can we remove these arrows? Well, with a little bit of CSS, we can turn them off easily:

Hide spinners with CSS:

/* Targetfing Chrome, Safari, Edge, and Opera browsers */
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;

/* Targetting the Firefox browser */
input[type=number] {
  -moz-appearance: textfield;


With the two above solutions, you can hide the input number spinners while keeping all the useful functionalities like incrementing the number with the keyboard and input validation. I hope you find this post helpful.

If you like this post, please share
Notify of
Inline Feedbacks
View all comments