Sometimes, we want to hide the HTML5 number input’s spin box with CSS.
In this article, we’ll look at how to hide the HTML5 number input’s spin box with CSS.
How to hide the HTML5 number input’s spin box with CSS?
To hide the HTML5 number input’s spin box with CSSm we set a few styles.
For instance, we write
<input type="number" step="0.01" />
to add a number input.
Then we hide the spin box with
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
to use -webkit-appearance: none; to hide the spin box.
We use -moz-appearance: textfield; to hide the spin box in Firefox.
Conclusion
To hide the HTML5 number input’s spin box with CSSm we set a few styles.
