Mon -
Sun 8.00 AM - 8.00 PM
HTML
)
In this tutorial we will learn how to remove arrow from input type number.
How to Remove Arrow from Input Type Number
To remove the up and down arrows from an input type number field, you can use CSS to style the input element. The arrows are part of the default browser styling for number inputs, so you'll need to override those styles.
Here's an example of how you can do it:
<!DOCTYPE html>
<html>
<head>
<style>
/* Work on Chrome, Safari, Edge, Opera Browser*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
/* Work on Firefox Browser */
input[type=number] {
-moz-appearance: textfield;
}
</style>
</head>
<body>
<input type="number" value="123">
</body>
</html>In the above example, we are using CSS to target the inner and outer spin buttons of the number input and set their appearance to none and here we used different CSS for different web browsers.
For Chrome, Safari, Edge, Opera Browser :
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
For Firefox Browser :
input[type=number] {
-moz-appearance: textfield;
}
Keep in mind that this method may not work in all browsers, and the appearance of form elements can vary from browser to browser. So, we need to use additional CSS and JS to remove the arrow from number type input