How to Remove Arrow from Input Type Number

In this tutorial we will learn 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

How to Remove Arrow from Input Type Number

How to Remove Arrow from Input Type Number

Enter your details before comment