Logo

Can I hide the HTML5 number input’s spin box?

Yes, you can hide the spin box of an <input type="number"> using vendor-specific CSS rules. For example:

/* Hide spin buttons in Chrome, Safari, Edge, and Opera */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Hide spin buttons in Firefox (requires >= Firefox 29) */ input[type=number] { -moz-appearance: textfield; }

Place these rules in your stylesheet, and the spin buttons will be visually removed (though the input is still recognized as numeric by the browser). Some older browsers may not fully support these rules, so testing across different browsers is a good idea.

If you’re looking to deepen your JavaScript and front-end skills, explore:

These courses at DesignGurus.io will reinforce your coding foundations and help you become proficient in modern web development.

CONTRIBUTOR
TechGrind