In this article, we will see how to hide the number input’s spin box in HTML5. The Spinbox or Spinner in HTML allows to increase or decrease the input number with the help of up-arrow & down-arrow, placed within the box, whose value defines in a range of real numbers. The spin box facilitates selecting or inputting a wide range of real numbers, which is mainly utilized to insert the number in HTML. It generally appears when the value of the <input> type is selected as a number, tel, & similar other cases. There are various CSS properties & extensions that can be implemented to hide the input’s spin box, which is discussed below:
- ::-webkit-inner-spin-button: It is a CSS pseudo-element that is implemented to the spinner button of the number picker <input> element, in order to add the styling properties to the inner portion.
- ::-webkit-outer-spin-button: It is a CSS pseudo-element that is utilized to implement the outer portion of the spinner button.
Approach:
-
For webkit browsers (Chrome & Safari): In these browsers, the default value of the -webkit-appearance property is textfield. To remove input’s spin box, the -webkit-appearance property on the ::-webkit-outer-spin-button,
::-webkit-inner-spin-button pseudo-classes must be set to none which is inner-spin-button by default. - For moz browsers (Firefox): In these browsers, the default value of the -moz-appearance property is number-input, and in order to remove input’s spin box you need to set it to textfield.
Example: The example code demonstrates how to practice the above properties and remove the HTML5 number input’s spin box.
<!DOCTYPE html> <html>
<head>
<style>
/* For Chrome and Safari */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button
{
-webkit-appearance: none;
margin: 0;
}
/* For Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
HTML5 number input without a spin box.
</h3>
<input type="number" />
</center>
</body>
</html>
|
Output: A HTML5 number input without its default spin box.