Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to disable arrows from Number input?
In this article, we will learn how to disable and hide arrows from number-type input fields using CSS. Number-type inputs display spinner arrows by default that allow users to increment or decrement values, but sometimes you may want to remove these for a cleaner interface.
Number-type inputs are useful when we only want numeric input from users, like input for age, height, weight, etc. By default, browsers show spinner arrows in number inputs that help change the values.
Syntax
/* WebKit browsers (Chrome, Safari) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
Method 1: Using CSS Pseudo-elements
In this approach, we use CSS pseudo-elements to target and hide the spinner arrows. This method uses ::-webkit-outer-spin-button and ::-webkit-inner-spin-button for WebKit browsers and -moz-appearance: textfield for Firefox
<!DOCTYPE html>
<html>
<head>
<style>
.no-arrows {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 4px;
width: 200px;
}
/* Remove arrows for WebKit browsers */
.no-arrows::-webkit-outer-spin-button,
.no-arrows::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Remove arrows for Firefox */
.no-arrows {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<h3>Number Input Without Arrows</h3>
<input type="number" class="no-arrows" placeholder="Enter a number" />
<h3>Normal Number Input (for comparison)</h3>
<input type="number" placeholder="Enter a number" style="padding: 10px; font-size: 16px;" />
</body>
</html>
Two number input fields appear: the first without spinner arrows and the second with default spinner arrows for comparison.
Method 2: Using HTML Attributes
You can also use the readonly attribute combined with CSS to disable the arrows while preventing user input
<!DOCTYPE html>
<html>
<head>
<style>
.readonly-input {
padding: 10px;
font-size: 16px;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}
.readonly-input::-webkit-outer-spin-button,
.readonly-input::-webkit-inner-spin-button {
-webkit-appearance: none;
}
</style>
</head>
<body>
<h3>Readonly Number Input Without Arrows</h3>
<input type="number" class="readonly-input" value="42" readonly />
</body>
</html>
A readonly number input field with a grayed-out background, containing the value "42" and no spinner arrows.
Method 3: Using inputmode Attribute
An alternative approach is to use inputmode="numeric" with a regular text input, which provides numeric keyboard on mobile devices without spinner arrows
<!DOCTYPE html>
<html>
<head>
<style>
.numeric-input {
padding: 10px;
font-size: 16px;
border: 2px solid #4CAF50;
border-radius: 4px;
width: 200px;
}
</style>
</head>
<body>
<h3>Text Input with Numeric Keyboard</h3>
<input type="text" inputmode="numeric" class="numeric-input" placeholder="Enter numbers only" />
</body>
</html>
A text input field with green border that will show a numeric keyboard on mobile devices but has no spinner arrows.
Browser Compatibility
| Method | Chrome/Safari | Firefox | Edge |
|---|---|---|---|
| -webkit-appearance: none | ? | ? | ? |
| -moz-appearance: textfield | ? | ? | ? |
| inputmode="numeric" | ? | ? | ? |
Conclusion
Removing spinner arrows from number inputs can be achieved using CSS pseudo-elements and the appearance property. The most reliable cross-browser solution combines both WebKit and Mozilla-specific CSS properties. Consider using inputmode="numeric" as an alternative for better mobile experience.
18K+ Views
