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-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Targetting the Firefox browser */
input[type=number] {
-moz-appearance: textfield;
}
Conclusion:
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.