The arrows in a number input box, known as spinners, allow users to increment or decrease the value using up and down arrows. While these arrows can be useful in some cases, there are situations where you may want to remove them for a cleaner or more customized design. Below we'll explore two common methods for removing the spinner arrows from a number input in HTML using CSS.
Preview Image:
See the Images below, the first image has the default arrow and the second is without the arrow.
Here are some common approaches to hide arrow from Number Input :
1. Using Webkit and Moz Appearance Property:
This method involves hiding the arrows using CSS for WebKit-based browsers (like Chrome, Safari, and Edge) and Mozilla-based browsers (like Firefox). It is one of the most common solutions.
Example: In this example, we are removing arrows from number input fields in web browsers by targeting the outer and inner spin buttons
<!DOCTYPE html>
<html>
<head>
<title>
Disable arrows from Number input using CSS
</title>
<style>
/* Hide the spin buttons in WebKit browsers */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Hide spin buttons in Firefox */
input[type="number"] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<h3>
How to disable arrows from Number input using CSS?
</h3>
<!-- Number input without arrows -->
<input type="number"
placeholder="Enter number..." />
</body>
</html>
Output:
2. Using inputmode Attribute for Mobile Devices
The inputmode attribute specifies the type of input expected, helping control the virtual keyboard layout on mobile devices. For numeric input without spinners, set inputmode="numeric", which brings up a numeric keyboard without adding spinners.
The main purpose of this attribute is to provide a numeric input interface in mobile devices.
<input type="text" inputmode="numeric" />
Example: In this example, we are removing arrows from a number input using the inputmode attribute set to numeric, enhancing user experience and design flexibility.
<!DOCTYPE html>
<html>
<head>
<title>
Remove Arrows from Number Input
</title>
</head>
<body>
<h3>Remove Arrows from Number Input</h3>
<input type="text"
inputmode="numeric"
placeholder="Enter number..." />
</body>
</html>
Output:
